下拉菜单案例_php.cn手记

abstract：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>html+css</title><link rel="stylesheet" type="text/css" href="css/css.c

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div>

<ul>

</ul>

</a>

<a>手机逛淘宝</a>

</div>

</div>

</div>

</body>

</html>

//css部分

*{margin: 0px;padding: 0px;}

.head{width: 100%;height: 40px;background: #f5f5f5}

a{text-align: none;font-size: 14px;}

.clean{clean:both;}

.content{width: 1000px; height: 40px;margin: 0 auto;}

.content_left{height: 40px;display:block; float: left;}

.content_left a {line-height: 40px; position: relative;display: inline-block;}

.content_left a:hover{color: pink;}

.content_left ul{display: none;margin-top: 0px;}

.content_left a:hover ul{display: block;position: absolute;width: 100px;}

.content_left ul li{height: 30px;}

.content_left ul li:hover{background: #f5f5f5}

li{list-style: none;}

.content_right{width:600px;height: 40px;float: right;;background: pink;}

Correcting teacher：天蓬老师Correction time：2019-04-08 09:26:41
Teacher's summary：下拉菜单,重点在于定位与元素隐藏 , 以后作业中, 要写注释

下拉菜单案例