html简单实现下拉菜单

最新推荐文章于 2024-04-27 17:27:51 发布

weixin_30409849

最新推荐文章于 2024-04-27 17:27:51 发布

阅读量300

点赞数

原文链接：http://www.cnblogs.com/manger/p/7238142.html

版权

主要用到的知识ul和li标签

ul li 是一个组合：是无序列表标签，在实际中用的非常多，
与之对应的是有序列表：ol li
li是不能单独使用，必须在于ul之中的
ul是块级元素，能直接定义宽高，而li是行级元素，不能直接定义高


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
 <title>下拉框</title>
 <style type="text/css">
* {
margin: 0px;
padding: 0px;
 }

#nav {
width: 600px;
height: 40px;
margin: 0 auto;
 }

#nav ul {
list-style: none;
 }

#nav ul li {
float: left;
line-height: 40px;
text-align: center;
position: relative;
 }

#nav ul li a {
text-decoration: none;
color: #000;
display: block;
padding: 0px 10px;
 }

#nav ul li a:hover {
color: #FFF;
background: #333
 }

#nav ul li ul {
position: absolute;
display: none;
 }

#nav ul li ul li {
float: none;
line-height: 30px;
text-align: left;
 }

#nav ul li ul li a {
width: 100%;
 }

#nav ul li ul li a:hover {
background-color: #06f;
 }

#nav ul li:hover ul {
display: block
 }
 </style>
</head>
<body>
<div id="nav">
 <ul>
 <li><a href="#">首页</a></li>
 <li><a href="#">学习中心</a>
 <ul>
 <li><a href="#">Oracle</a></li>
 <li><a href="#">MySQL</a></li>
 <li><a href="#">Python</a></li>
 <li><a href="#">mongodb</a></li>
 <li><a href="#">redis</a></li>
 </ul>
 </li>
 <li><a href="#">个人中心</a></li>
 <li><a href="#">关于我们</a></li>
 </ul>
</div>

</body>
</html>

转载于:https://www.cnblogs.com/manger/p/7238142.html

weixin_30409849

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html简单实现下拉菜单

主要用到的知识ul和li标签ul li 是一个组合：是无序列表标签，在实际中用的非常多，与之对应的是有序列表：ol lili是不能单独使用，必须在于ul之中的ul是块级元素，能直接定义宽高，而li是行级元素，不能直接定义高<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
复制链接

扫一扫