如何用CSS制作一个二级下拉菜单

虽然现在对于CSS依旧是云里雾里的，但还是强行把题目所要求的效给做出来了，代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
ul, li
{list-style: none;}
a
{text-decoration: none;}
.nav{border: 0.125rem solid #ccc;
border-right: none;
float: left;
margin: 6.5rem 0 0 0rem;}
.nav ul li
{float: left;}
.nav ul li a
{width: 7.5rem;
height: 2.5rem;
text-align: center;
line-height: 2.5rem;
display: block;
border-right: 0.125rem solid #CCCCCC;
background: blue;
color: white;}
.nav ul li a:hover
{color: #f00;}
.nav ul li ul
{position: absolute;
display: none;}
.nav ul li ul li
{float: none;}
.nav ul li ul li a
{border-right: none;
border-top: 0.0625rem dotted #FFFFFF;}
.nav ul li:hover ul
{display: block;}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a>
<ul>
<li><a href="#">Selector</a></li>
<li><a href="#">Use CSS File in</a></li>
<li><a href="#">Formatting</a></li>
<li><a href="#">Layout</a></li>
</ul></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">XML</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Ajax</a></li> </ul>
</div>
</body>
</html>

效果如下：

posted on 2020-03-22 18:16 SillyNode 阅读(287) 评论(0) 收藏举报