纯css下拉菜单

最新推荐文章于 2024-11-02 23:02:00 发布

「已注销」

最新推荐文章于 2024-11-02 23:02:00 发布

阅读量580

点赞数

文章标签： css border float menu html

本文链接：https://blog.csdn.net/xin_l_o/article/details/6522390

版权

参考自http://www.17css.com/a-detailed-explanation-of-the-css-drop-down-menu/

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 纯CSS下拉菜单 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<style type="text/css">
*{margin:0;padding:0;}
body
{
background:pink;
}
.menu
{
margin:20px auto 20px;
width:400px;
border:5px solid black;
background-color:gray;
}
.menu ul li
{
list-style-type:none;
float:left;
}
.menu ul li a
{
text-align:center;
color:pink;
display:block;
text-decoration:none;
width:100px;
background-color:gray;
font-size:20px
}
.menu ul li ul{display:none;}
.menu ul li:hover a
{
color:white;
background-color:#696969;
}
.menu ul li:hover ul
{
display:block;
position:absolute;
width:100px;
}
.menu ul li:hover ul li a
{
display:block;
background-color:gray;
color:snowy;
}
.menu ul li:hover ul li a:hover
{
background-color:#696969;
color:white;
}
</style>
<body>
<div class="menu">
<ul>
<li><a href="#">ONE</a>
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
</li>
<li><a href="#">TWO</a>
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
</li>
<li><a href="#">THREE</a>
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
</li>
<li><a href="#">FOUR</a>
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
</li>
</ul>
</div>
<p style="text-align:center;padding:20px;"> <a href='http://www.17css.com/a-detailed-explanation-of-the-css-drop-down-menu/' title="参考自http://www.17css.com/a-detailed-explanation-of-the-css-drop-down-menu/">详情点击这里</a></p>
<p style='position:fixed;top:96%;left:42%'>http://www.17css.com/</p>
</body>
</html>