DIV CSS Column Navigation example, super cool resolution!

Core tips: DIV CSS Column Navigation example, super cool resolution!

As shown in the picture effect:

First look at the XHTML code:

<ul id= "Navlist" > <li id= "active" >item one <ul id= "subnavlist" > <li id= "subactive" >subitem one& lt;/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>

Take a look at how CSS is fixed for a long time related elements:

#navcontainer {margin-left:30px} <br/><br/> #navcontainer ul <br/>{<br/>margin:0; <br/& gt;padding:0; <br/>list-style-type:none; <br/>font-family:verdana, Arial, Helvetica, Sans-serif; &LT;BR/&GT} <br/><br/> #navcontainer li {margin:0;} <br/><br/> #navcontainer a <br/>{& lt;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; &LT;BR/&GT} <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; &LT;BR/&GT} <br/><br/> #navcontainer ul ul li {margin:0} <br/><br/> #navcontainer ul ul a <b r/>{<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; &LT;BR/&GT} <br/><br/> #navcontainer ul ul a:hover <br/>{<br/>color: #000 <br/> Background-color: #889E88; <br/>text-decoration:none; <br/>}