CSS+DIV设计实例：超酷的竖排导航栏

来源: 时间:06-09-11 点击: 点击这里收藏本文

HTML：

以下是引用片段：
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>
<li><a href="#">Subitem two</a></li>
<li><a href="#">Subitem three</a></li>
<li><a href="#">Subitem four</a></li>
</ul>

</li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>
</div>

CSS：

以下是引用片段：
#navcontainer { margin-left: 30px; }

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
}

#navcontainer li { margin: 0; }

#navcontainer a
{
display: block;
padding: 5px 10px;
width: 140px;
color: #000;
background-color: #ADC1AD;
text-decoration: none;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-bottom: 1px solid #333;
border-right: 1px solid #333;
font-weight: bold;
font-size: .8em;
background-image: url(images/vertical06.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}

#navcontainer a:hover
{
color: #000;
background-color: #889E88;
text-decoration: none;
border-top: 1px solid #333;
border-left: 1px solid #333;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
background-image: url(images/vertical06a.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}

#navcontainer ul ul li { margin: 0; }

#navcontainer ul ul a
{
display: block;
padding: 5px 5px 5px 30px;
width: 125px;
color: #000;
background-color: #C5D8C5;
text-decoration: none;
font-weight: normal;
}

#navcontainer ul ul a:hover
{
color: #000;
background-color: #889E88;
text-decoration: none;
}

ABOUT THE CODE
Some lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.

相关教程

广而告之

吸引访客,做内容有价值的网

关于Photoshop直方图的详细

网站策划,B2B网站策划者应

Web标准网站开发人员配备

便宜/廉价的网站推广方式

写给做BBS的新站长

行为经济学在网站运营中的

漫谈网站改版的必要性

网站策划需要具备的知识

外贸网站建设全攻略

CSS让网页更容易设计与维护

和马云学习如何做网站推广

如何制作网页（网页制作实

如何选择网页制作工具

下载安装Dreamweaver8

制作主页前的准备

垃圾站全教程--之一(新手上

怎样个人网页制作,制作个人

制作模板

在Dreamweaver设置站点

制作首页

网站设计65条原则

规划站点

中国所有银行的BIC code(即

个人主页制作完全手册