HTML+CSS 制作下拉菜单

最新推荐文章于 2023-08-07 17:42:42 发布

苂先生

最新推荐文章于 2023-08-07 17:42:42 发布

阅读量365

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/zk___enen/article/details/106143161

版权

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}
ul{						/*导航栏整体居中*/
	list-style: none;
	width: 500px;
	margin: 0 auto;
}
.frist:after {                    /*清除浮动*/
	content: "";
	clear: both;
	display: block;
}
li {
	float: left;
	margin-left: 20px;
	width: 50px;
	text-align:center;
}
a{
	display:block;
	width: 50px;
	background: #6F6;
	text-decoration: none;
}

.second li{
	margin:0;
	clear:both;
	}
.second li a:hover{
		background:#FF6;
		}
.second{		/*二级目录隐藏*/
	display:none;
	position:fixed;/*保护页面元素布局*/
	}
.frist>li:hover .second{ /*在指向li标签时 ul标签属性变化*/
	display:block;
	}
</style>
</head>

<body>
<nav>
  <ul class="frist">
    <li> <a href="#">英语</a>
    	<ul class="second">
        	<li ><a href="#">练习一</a></li>
            <li ><a href="#">练习一</a></li>
            <li ><a href="#">练习一</a></li>
            <li ><a href="#">练习一</a></li>
        </ul>
    </li>
    <li><a href="#">数学</a>
    	<ul class="second">
        	<li ><a href="#">练习一</a></li>
            <li ><a href="#">练习一</a></li>
            <li ><a href="#">练习一</a></li>
            <li ><a href="#">练习一</a></li>
        </ul>
    </li>
    <li><a href="#">体育</a>
    	<ul class="second">
        	<li ><a href="#">练习一</a></li>
            <li ><a href="#">练习一</a></li>
            <li ><a href="#">练习一</a></li>
            <li ><a href="#">练习一</a></li>
        </ul>
    </li>
    <li><a href="#">化学</a>
    	<ul class="second">
        	<li ><a href="#">练习一</a></li>
            <li ><a href="#">练习一</a></li>
            <li ><a href="#">练习一</a></li>
            <li ><a href="#">练习一</a></li>
        </ul>
    </li>
    <li><a href="#">生物</a>
    	<ul class="second">
        	<li ><a href="#">练习一</a></li>
            <li ><a href="#">练习一</a></li>
            <li ><a href="#">练习一</a></li>
            <li ><a href="#">练习一</a></li>
        </ul>
    </li>
  </ul>
</nav>
<div style="background:red; height:20px;"></div>
</body>

苂先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS 制作下拉菜单

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">* { padding: 0; margin: 0;}ul{ /*导航栏整体居中*/ list-style: none; width: 500px; margin: 0 auto;}
复制链接

扫一扫