DIV CSS Column Navigation example, super cool parsing

As shown in the picture effect:

First look at the XHTML code:

        <div id= "Navcontainer" > <p><ul id= "navlist" > </p ><p><li id= "Active" ><a href= "http://www.3lian.com/" id= "current" >item one</a> </p> <p><ul id= "Subnavlist" > </p><p><li id= "subactive" ><a href= "http://www.3lian.com/" Id= "Subcurrent" >subitem one</a></li> </p><p><li><a href= "http://www.3lian.com /">subitem two</a></li> </p><p><li><a href=" http://www.3lian.com/">subitem" three</a></li> </p><p><li><a href= "http://www.3lian.com/" >subitem four</a ></li> </p><p></ul> </p><p></li> </p><p><li><a href= "http://www.3lian.com/" >item two</a></li> </p><p><li><a href= "http:// www.3lian.com/">item three</a></li> </p><p><li><a href=" http://www.3lian.com/">item four</a></li> </p><p></ul> </p></div>

See how CSS is fixed for a long time related elements:

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