我是个菜鸟,刚刚接触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>