css给你灵感-纯css嵌套列表的树形导航

2009-09-14 19:10:48

这是一个用css div制作的嵌套列表的树形导航，很适合网站地图页面。给大家代码，希望您些许灵感。

先看看下面这个效果，鼠标刷过试试。

Fruits
Vegetables
Corn
Water
This is the end!

怎么样效果不错吧？

看看我们用到了哪些图片？

freeren.org 树形导航菜单

html代码

<div class="nav">
 <ul>
 <li><a href="#now-here">Fruits</a></li>
 <li><a href="#now-here">Vegetables</a></li>
 <li><a href="#now-here">Corn</a>
 
 <ul>
 <li><a href="#now-here">Bread</a></li>
 <li><a href="#now-here">Cake</a></li>
 <li class="sub-sub"><a href="#now-here">Cookies</a>
 
 <ul>
 <li><a href="#now-here">Cookies With Marmelade</a></li>
 <li><a href="#now-here">Cookies With Chocolate</a></li>
 <li><a href="#now-here">Pure Cookies</a></li>
 </ul>
 </li>
 </ul>
 </li>
 <li><a href="#now-here">Water</a>
 <ul>
 <li><a href="#now-here">Pure Water</a></li>
 <li><a href="#now-here">Clean Water</a></li>
 <li><a href="#now-here">Fresh Water</a></li>
 </ul>
 </li>
 <li><a href="#">This is the end!</a></li>
 </ul>
</div>

css代码

body {
    font-family:Geneva, Arial, Helvetica, Sans-Serif;
    font-size:83%;
    line-height:173%;
    margin:0;
    padding:3px;
}
h1 {
    font-size:140%;
}
p {
    line-height:165%;
}
p span {
    color:#333333;
    font-size:10px;
}
#container {
    background:#FAFAFA none repeat scroll 0 0;
    border:1px solid silver;
    padding:7px;
    width:550px;
}
.nav {
    font-family:Arial, Helvetica, Sans-Serif;
    margin:50px 0 0 70px;
    overflow:visible;
    padding:0;
}
.nav ul {
    border:0 none;
    display:block;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:-18px 0;
    padding:0;
}
html + body .nav ul {
    left:-10px;
    position:relative;
    top:-12px;
}
.nav ul li {
    border:0 none;
    left:-11px;
    margin:10px 0 5px 10px;
    padding:0;
    position:relative;
    top:-1px;
}
html + body .nav ul li {
    display:inline;
    left:-12px;
    margin:10px 0 5px;
    position:relative;
    top:0;
    width:100%;
}
.nav a, .nav a:visited {
    cursor:pointer;
    display:block;
    font-size:110%;
    font-weight:bold;
    height:2em;
    line-height:2em;
    margin:0 0 0 -10px;
    padding:1px;
    text-align:left;
    text-decoration:none;
    text-indent:0.4em;
    width:18.4em;
}
html + body .nav a, html + body .nav a:visited {
    padding:0 0 0 8px;
    text-indent:0;
    width:18.6em;
}
.nav ul ul {
    background:transparent none repeat scroll 0 0;
    padding:20px 0 18px;
    position:relative;
    top:-1px;
}
html + body .nav ul ul {
    left:0;
    position:relative;
    top:0;
}
.nav ul li li {
    left:0;
    margin:10px 0 5px 1px;
    padding:0 0 0 25px;
    position:relative;
    top:0;
}
html + body .nav ul li li {
    left:22px;
}
.nav ul li .sub-sub {
    left:0;
    margin:10px 0 0 1px;
    position:relative;
    top:0;
}
html + body .nav ul li .sub-sub {
    left:22px;
}
.nav ul ul a, .nav ul ul a:visited {
    font-size:110%;
    font-weight:normal;
    height:1.8em;
    line-height:1.8em;
    margin:0;
    text-indent:0.3em;
    width:15.9em;
}
html + body .nav ul ul a, html + body .nav ul ul a:visited {
    left:-5px;
    position:relative;
    top:0;
}
.nav ul ul ul {
    margin:0 0 34px 12px;
    padding:8px 0 0;
}
.nav ul li li li {
    left:0;
    margin:10px 0 5px;
    padding:0 0 0 20px;
    position:relative;
    top:13px;
}
html > body .nav ul li li li {
    top:13px;
}
html + body .nav ul li li li {
    top:18px;
}
.nav ul ul ul a, .nav ul ul ul a:visited {
    font-size:100%;
    padding:1px;
    width:14.9em;
}
html + body .nav ul ul a, html + body .nav ul ul a:visited {
    padding:0 0 0 8px;
    text-indent:0;
}
html + body .nav ul li a .box-content {
    padding:0.1em 0.1em 0.1em 0.5em;
}
.nav {
    border-color:#BBBBBB;
    border-style:none none none solid;
    border-width:0 0 0 1px;
}
.nav ul li li {
    background:transparent url(images/line.gif) no-repeat scroll left center;
    color:#000000;
}
.nav ul ul ul {
    border-left:1px solid #BBBBBB;
}
.nav ul li .sub-sub {
    background:transparent url(images/line.gif) no-repeat scroll left top;
}
.nav a, .nav a:visited {
    color:#4F4F4F;
}
.nav a:active, .nav a:hover, .nav a:focus, a:focus .sffocus {
    color:#000000;
}
.nav ul ul a, .nav ul ul a:visited {
    color:#4F4F4F;
}
.nav ul ul a:active, .nav ul ul a:hover, .nav ul ul a:focus {
    color:#000000;
}
.nav ul li .ro {
    background:transparent url(images/ro-01.gif) no-repeat scroll right top;
    display:block;
    width:100%;
}
.nav ul li .lo {
    background:transparent url(images/lo-01.gif) no-repeat scroll left top;
    display:block;
    width:100%;
}
.nav ul li .ru {
    background:transparent url(images/ru-01.gif) no-repeat scroll right bottom;
    display:block;
    width:100%;
}
.nav ul li .lu {
    background:transparent url(images/lu-01.gif) no-repeat scroll left bottom;
    display:block;
    width:100%;
}
.nav ul li .box-content {
    padding:0.1em;
    width:100%;
}
.nav ul li li .ro {
    background:transparent url(images/ro-02.gif) no-repeat scroll right top;
}
.nav ul li li .lo {
    background:transparent url(images/lo-02.gif) no-repeat scroll left top;
}
.nav ul li li .ru {
    background:transparent url(images/ru-02.gif) no-repeat scroll right bottom;
}
.nav ul li li .lu {
    background:transparent url(images/lu-02.gif) no-repeat scroll left bottom;
}
.nav ul li li .box-content {
    padding:0.1em;
    width:100%;
}
.nav ul li a:hover .ro {
    background:transparent url(images/ro_h.gif) no-repeat scroll right top;
}
.nav ul li a:hover .lo {
    background:transparent url(images/lo_h.gif) no-repeat scroll left top;
}
.nav ul li a:hover .ru {
    background:transparent url(images/ru_h.gif) no-repeat scroll right bottom;
}
.nav ul li a:hover .lu {
    background:transparent url(images/lu_h.gif) no-repeat scroll left bottom;
}

上一篇：css给你灵感—div + css 弧形导航菜单
下一篇：css给你灵感-纯css箭头可随鼠标移动的导航菜单

发表看法3

>> more 看看其他人的看法
您好有使用您的网站平台WordPress的？我新的博客世界，但我试图开始建立自己。你需要的任何HTML编码的知识，使自己的博客？任何帮助将不胜感激！
1 payday loans vancouver 2012-1-12 17:40 Thursday
}
今天，我与我的孩子去海滨。我发现了一个贝壳，把它给了我4岁的女儿说：“如果你把你的耳朵，你可以听到海洋。 ”她把她的耳朵壳和尖叫。有一个寄居蟹内，掐她的耳。她从来没有想回去！ LOL ，我知道这是完全关闭的话题，但我不得不告诉别人！
2 search engine optimization vancouver 2012-1-13 10:42 Friday
}
我和我的搭档绊倒在这里，不同的网页，并认为我还不如以及事情。我喜欢我所看到的所以现在我跟着你的。期待您的网页第二次。
3 oh canada 2012-1-21 14:00 Saturday
}

有什么想说的吗？

热点文章