我是个菜鸟，刚刚接触CSS方面的技术，由于工作的需要，要求自己掌握jquery以及ajax相关的技术，于是就开始慢慢的研究那些技术，这css的技术也是自己看了w3c的教程手册之后，写的一个比较简单的导航，虽然比较简单，但是也花费了我不少的时间在琢磨以及摸透他。
其实也就是一个简单的hover的函数的使用，以及css的相关的一些标签的学习，比较简单，但是自己琢磨出来还是感觉不错的。下面就把代码贴上，希望自己以后能够更加的完善和学习。具体的css的知识的学习就去w3c吧！
<html>
<head>
<title>竖着的导航菜单</title>
<style type="text/css">
body {
font-family: Verdana;
font-size: 12px;
line-height: 1.5;
}
.menu{
width: 100px;
border: 1px solid #CCC;
border-bottom: none;
}
a {
color: #000;
text-decoration: none;
}
a: hover {
color: red;
}
.first{
list-style: none;
margin: 0px;
padding: 0px;
}
.first li{
background: #eee;
padding: 0px 8px;
height: 26px;
line-height: 26px;
border-bottom: 1px solid #CCC;
position: relative;
}
.second {
list-style: none;
display: none;
position: absolute;
left: 100px;
top: 0px;
width: 100px;
border: 1px solid #ccc;
border-bottom: none;
}
.third{
list-style: none;
display: none;
position: absolute;
left: 100px;
top: 0px;
width: 100px;
border: 1px solid #ccc;
border-bottom: none;
}
.first li:hover .second{
display: block;
}
.first .second li:hover .third{
display:block;
}
</style>
</head>
<body>
<div class="menu">
<ul class="first">
<li><a href="#">第一个</a>
<ul class="second">
<li><a href="#">第二级目录</a>
<ul class="third">
<li><a href="#">第三级目录</a></li>
<li><a href="#">第三级目录</a></li>
</ul>
</li>
<li><a href="#">第二级目录</a></li>
</ul>
</li>
<li><a href="#">第二个</a></li>
<li><a href="#">第三个</a></li>
</ul>
</div>
</body>
</html>
2189
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
