<html> <head> <title></title> <style>*{margin:0padding:0} ul,li{ list-style-type:none padding:0 margin:0 } #nav li a{ display:block width:100px text-align:center text-decoration:none color:#ffffff background-color:#000000 } #nav li{ position:relative margin-bottom:2pxfloat:leftmargin-right:5px } #nav li ul{ position:absolute left:10px top:20px display:nonewidth:100px } #nav li:hover ul{ display:block } </style> </head> <body><ul id="nav"><li><a href="#">首页</a></li><li><a href="#">关于我们</a><ul><li>我们的故事</li><li>我们的团队</li></ul></li><li><a href="#">我们的服务</a><ul><li>网页设计</li><li>页面制作</li><li>程序开发</li></ul></li><li><a href="#">联系我们</a><ul><li>团队主力</li><li>团队成员</li></ul></li></ul> </body></html>
这是一个下拉菜单的例子，里面有隐藏和显示，显示用的是hover属性，这个属性就是鼠标移动到该标签执行里面的代码html代码-----------------------------------------------
<h2>下拉菜单</h2>
<p>鼠标移动到按钮上显示下拉菜单</p>
<div class="dropdown">
<button class="dropbtn">下拉菜单</button>
<div class="dropdown-content">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
</div>
</div>
css代码--------------------------------------------------------------------------------------
.dropbtn {
background-color: #4CAF50
color: white
padding: 16px
font-size: 16px
border: none
cursor: pointer
}
.dropdown {
position: relative
display: inline-block
}
.dropdown-content {
display: none
position: absolute
background-color: #f9f9f9
min-width: 160px
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)
}
.dropdown-content a {
color: black
padding: 12px 16px
text-decoration: none
display: block
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block
}
.dropdown:hover .dropbtn {
background-color: #3e8e41
}
