DIV CSS列形導航一例，超酷解析！

核心提示：DIV CSS列形導航一例，超酷解析！

如圖效果:

先看看XHTML代碼：

<ul id="navlist"> <li id="active">Item one <ul id="subnavlist"> <li id="subactive">Subitem one</li> <li>Subitem two</li> <li>Subitem three</li> <li>Subitem four</li> </ul> </li> <li>Item two</li> <li>Item three</li> <li>Item four</li> </ul>

看看CSS是如何定久相關元素的：

#navcontainer { margin-left: 30px; } <br/><br/>#navcontainer ul <br/>{ <br/>margin: 0; <br/>padding: 0; <br/>list-style-type: none; <br/>font-family: verdana, arial, Helvetica, sans-serif; <br/>} <br/><br/>#navcontainer li { margin: 0; } <br/><br/>#navcontainer a <br/>{ <br/>display: block; <br/>padding: 5px 10px; <br/>width: 140px; <br/>color: #000; <br/>background-color: #ADC1AD; <br/>text-decoration: none; <br/>border-top: 1px solid #fff; <br/>border-left: 1px solid #fff; <br/>border-bottom: 1px solid #333; <br/>border-right: 1px solid #333; <br/>font-weight: bold; <br/>font-size: .8em; <br/>background-image: url(images/vertical06.jpg); <br/>background-repeat: no-repeat; <br/>background-position: 0 0; <br/>} <br/><br/>#navcontainer a:hover <br/>{ <br/>color: #000; <br/>background-color: #889E88; <br/>text-decoration: none; <br/>border-top: 1px solid #333; <br/>border-left: 1px solid #333; <br/>border-bottom: 1px solid #fff; <br/>border-right: 1px solid #fff; <br/>background-image: url(images/vertical06a.jpg); <br/>background-repeat: no-repeat; <br/>background-position: 0 0; <br/>} <br/><br/>#navcontainer ul ul li { margin: 0; } <br/><br/>#navcontainer ul ul a <br/>{ <br/>display: block; <br/>padding: 5px 5px 5px 30px; <br/>width: 125px; <br/>color: #000; <br/>background-color: #C5D8C5; <br/>text-decoration: none; <br/>font-weight: normal; <br/>} <br/><br/>#navcontainer ul ul a:hover <br/>{ <br/>color: #000; <br/>background-color: #889E88; <br/>text-decoration: none; <br/>}