Make Line Tree Navigation Pure Use CSS

by Beben Koben

HTML

<h1>Tutorial Blog for Stylish Blogger</h1>
<h3>Site Navigation</h3>
<div class="main_nav">
<ul>
<li class="mains_sub">
<a href="/">Main</a>
<ul>
<li><a href="http://undercover-blogger.blogspot.com/2012/01/about-me.html">About</a></li>
<li><a href="http://beben-koben.blogspot.com/2009/08/kontak-beben.html">Contact</a></li>
<li><a href="http://www.google.com/policies/privacy/blogs/">Terms</a></li>
</ul>
</li>
<li class="mains_sub"><a href="#">Blog</a>
<ul>
<li><a href="#">Portfolio</a></li>
    <li><a href="http://ben-tools.blogspot.com">Tools</a></li>
</ul>    
</li>                
<li><a href="#">Write For Us</a></li>
</ul>
<ul>
<li class="mains_sub">
<a href="#">Browse</a>
<ul>
<li><a href="#">Chrome</a></li>
<li><a href="#">Mozilla</a></li>
<li><a href="#">Opera</a></li>
<li><a href="#">Safari</a></li>
<li><a href="#">Internet Explorer</a></li>
</ul>
</li>
<li><a href="#">Join Us</a></li>
<li><a href="#">Member</a></li>
</ul>
</div>
      <div class="cred" align="center"> Creativity by <a href="http://ben-tools.blogspot.com/">Beben Koben</a></div>
<footer>
    <a class="orig" href="http://beben-koben.blogspot.com/2012/07/make-line-tree-navigation-pure-use-css.html" title="GO BACK TO ARTICLE"> &laquo; BACK TO</a>
    <h2><a href="http://beben-koben.blogspot.com/">BEBEN KOBEN</a></h2>
</footer>

CSS

*
{margin:0;padding:0;}
body
{background:#325C76;color:#ddd;font:15px Calibri, Arial, sans-serif;text-shadow:1px 1px 1px #000;padding:10px;}
body:before {
    content: "";
    position: fixed;
    top: -7px;
    left: 0;
    width: 100%;
    height: 7px;
    box-shadow: 0px 0px 10px rgba(0,0,0,.7);
    z-index: 100;
}
a,a:visited
{text-decoration:none;outline:none;color:#a00;}
a:hover
{color:#fff;}
footer
{background:#c48962;position:fixed;width:100%;border-top:1px solid #555;height:70px;bottom:0;left:0;color:#fff;text-shadow:1px 2px 0 #000;}
footer h2
{font:25px/26px Acens;font-weight:bold;left:70%;margin:0px 0 0 150px;padding:20px 0;position:relative;width:400px;}
footer a.orig,
a.orig:visited
{-moz-box-shadow:0px 0px 20px #000;-webkit-box-shadow:0px 0px 20px #000;box-shadow:0px 0px 20px #000;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;
    text-decoration:blink;
    font-weight:bold;
    color:#f00;
    font-size:14px;
    left:37%;
    line-height:46px;
    margin:12px 0 0 -405px;
    position:absolute;
    top:0;
    width:75px;
}
.cred {padding-top:225px;}
h1{text-align:center;text-shadow:3px 3px 5px #000;padding:25px;font-family: Verdana, Geneva, sans-serif;font-size:20pt;color:#D3A76F;}
h3 {font-size:15pt;color:#fff}
.main_nav {
        float:left;
        width:370px;
        margin-left:5px;
        font-size:14px;
    }
.main_nav ul {
        float:left;
        display:inline;
        width:175px;
        margin-right:5px;
        color:#cbd6e2;
        padding:10px 0 0 0;
list-style-type:none;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAKCAYAAAB10jRKAAAAE0lEQVQImWOwqZj/nwE3UY5BAAA4Chcx1Uq/tAAAAABJRU5ErkJggg==) left repeat-y;
    }
.main_nav ul li {
        float:left;
        width:145px;
        padding-left:23px;
        line-height:145%;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAABCAYAAADeko4lAAAAF0lEQVQImWOwLpv7nxpYN2/mf9mUKf8BLl4tsumK+hsAAAAASUVORK5CYII=) 0 bottom...