首页 > 代码库 > css实现下拉列表练习，原来javascipt的onmouseover和onmouseout可以用css轻松实现
css实现下拉列表练习，原来javascipt的onmouseover和onmouseout可以用css轻松实现
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="http://www.mamicode.com/style/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://www.mamicode.com/js.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<h3>标题栏测试</h3>
<div id="nav">
<ul>
<li>我的首页
<ul>
<li><a href="http://www.mamicode.com/#">我的Png</a></li>
<li><a href="http://www.mamicode.com/#">我的Gif</a></li>
<li><a href="http://www.mamicode.com/#">我的酷站</a></li>
<li><a href="http://www.mamicode.com/#">我的收藏</a></li>
</ul>
</li>
<li>我的首页
<ul>
<li><a href="http://www.mamicode.com/#">我的Png</a></li>
<li><a href="http://www.mamicode.com/#">我的Gif</a></li>
<li><a href="http://www.mamicode.com/#">我的酷站</a></li>
<li><a href="http://www.mamicode.com/#">我的收藏</a></li>
</ul>
</li>
<li>我的首页
<ul>
<li><a href="http://www.mamicode.com/#">我的Png</a></li>
<li><a href="http://www.mamicode.com/#">我的Gif</a></li>
<li><a href="http://www.mamicode.com/#">我的酷站</a></li>
<li><a href="http://www.mamicode.com/#">我的收藏</a></li>
</ul>
</li>
<li>我的首页
<ul>
<li><a href="http://www.mamicode.com/#">我的Png</a></li>
<li><a href="http://www.mamicode.com/#">我的Gif</a></li>
<li><a href="http://www.mamicode.com/#">我的酷站</a></li>
<li><a href="http://www.mamicode.com/#">我的收藏</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
==============================================
CSS
==============================================
body {
background: #fff;
font-size: 16px;
}
h3 {
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav > ul > li {
width: 120px;
border: 1px solid #eee;
background: #f1fbec;
padding: 4px 0;
text-align: center;
color: #999;
cursor: pointer;
position: relative;
float: left;
margin: 10px;
}
#nav ul li:hover {
background: #f1fbec;
color: #666;
border: none;
}
#nav > ul > li > ul {
border: 1px solid #eee;
border-top: none;
background: #f1fbec;
position: absolute;
top: 26px;
left: 0;
display: none;
}
#nav > ul > li > ul li a {
color: #666;
text-decoration: none;
font-weight: bold;
}
#nav > ul > li > ul > li {
width: 120px;
padding: 10px 0;
border: none;
}
#nav > ul > li > ul > li:hover {
background: lightgreen;
color: black;
font-weight: bold;
font-size: 20px;
}
#nav ul li:hover > ul {
display: block;
}