中文字幕在线直播,成人免费图片免费观看,国内精品国语自产拍在线观看,国产欧美精品区一区二区三区

CSS+DIV設(shè)計實例:超酷的豎排導(dǎo)航欄
時間:2006年05月29日 內(nèi)容來源: 互諾科技 瀏覽量:0

HTML:

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

</li>
<li><a >Item two</a></li>
<li><a >Item three</a></li>
<li><a >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.

   查看效果