Drop Down Super Keren

by dharlaferdana

HTML

<div class="nav-container-outer">
    <img src="http://4.bp.blogspot.com/_jM8-wHc3NKY/TQtJOxMlB1I/AAAAAAAAAKw/hXZ77KQnoT8/s1600/nav-bg-l.jpg" alt="" class="float-left" />
    <img src="http://3.bp.blogspot.com/_jM8-wHc3NKY/TQtJQzrYfsI/AAAAAAAAAK0/Wv8PRzkfPV8/s1600/nav-bg-r.jpg" alt="" class="float-right" />
    <ul id="nav-container" class="nav-container">
        <li><a class="item-primary" href="http://www.dhf.web.id">HOME</a>

        </li>
        <li><span class="divider divider-vert"></span>
        </li>
        <li><a class="item-primary" href="#">Products</a>

            <ul style="width:150px;">
                <li><a href="#">SoftwarePlus</a>
                </li>
                <li><a href="#">MagicDriver</a>
                </li>
                <li><a href="#">GreatFX</a>
                </li>
                <li><a href="#">SampleSoft</a>
                </li>
                <li><a href="#">UnDoIt</a>
                </li>
                <li><a href="#">100% CSS Menu</a>
                </li>
                <li><a href="#;">With Cross-Browser</a>
                </li>
                <li><a href="#;">Dropdowns</a>
                </li>
                <li><a href="#;">Absolutely NO Javascript</a>
                </li>
                <li><a href="#;">Being Used On</a>
                </li>
                <li><a href="#;">These Menus</a>
                </li>
                <li><span class="divider divider-horiz"></span>
                </li>
                <li><a href="#;">Example Of a Divider</a>
                </li>
                <li><a href="#;">With No Title</a>
                </li>
            </ul>
        </li>
        <li><span class="divider divider-vert"></span>
        </li>
        <li><a class="item-primary" href="#">Quality</a>

            <ul style="width:150px;">
                <li><a href="#">SoftwarePlus</a>
                </li>
                <li><a href="#">MagicDriver</a>
                </li>
               ...

CSS

/*^'^ Navigation Structure ^'^*/
.nav-container-outer {
    background: #990000;
    padding: 0px;
    height: 74px;
    background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQtJNaPc62I/AAAAAAAAAKs/2BmTvxN4wyk/s1600/nav-bg.jpg);
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.nav-container .divider {
    display: block;
    font-size: 1px;
    border-width: 0px;
    border-style: solid;
}

.nav-container .divider-vert {
    float: left;
    width: 0px;
    display: none;
}

.nav-container .item-secondary-title {
    display: block;
    cursor: default;
    white-space: nowrap;
}

.clear {
    font-size: 1px;
    height: 0px;
    width: 0px;
    clear: left;
    line-height: 0px;
    display: block;
    float: none;
}

.nav-container {
    position: relative;
    zoom: 1;
    margin: 0 auto;
}

.nav-container a, .nav-container li {
    float: left;
    display: block;
    white-space: nowrap;
}

.nav-container div a, .nav-container ul a, .nav-container ul li {
    float: none;
}

.nav-container ul {
    left: -10000px;
    position: absolute;
}

.nav-container, .nav-container ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.nav-container li a {
    float: none;
}

.nav-container li {
    position: relative;
}

.nav-container ul {
    z-index: 10;
}

.nav-container ul ul {
    z-index: 20;
}

.nav-container ul ul ul {
    z-index: 30;
}

.nav-container ul ul ul ul {
    z-index: 40;
}

.nav-container ul ul ul ul ul {
    z-index: 50;
}

li:hover>ul {
    left: auto;
}

#nav-container ul {
    top: 100%;
}

#nav-container ul li:hover>ul {
    top: 0px;
    left: 100%;
}


/*^'^ Primary Items ^'^*/

#nav-container a {
    padding: 7px 17px 7px 18px;
    margin: 10px 0px 0px 0px;
    color: #FFFFFF;
    font-family: Trebuchet MS, Arial, sans-serif, Helvetica;
    font-size: 14px;
    text-decoration: none;
    font-weight: bold;
    background:...