Horizontal Responsive Menu

by KELVIN LEE

HTML

<nav id="hoz-menu">
    <ul id="hoz-menu" class="topmenu">
        <li class="topfirst"><a href="#" style="height:16px;line-height:16px;"><span>Item 1</span></a>

            <ul>
                <li><a href="#">Item 1.1</a>
                </li>
                <li><a href="#">Item 1.2</a>
                </li>
            </ul>
        </li>
        <li class="topmenu"><a href="#" style="height:16px;line-height:16px;"><span>Item 2</span></a>

            <ul>
                <li><a href="#">Item 2.1</a>
                </li>
                <li><a href="#">Item 2.2</a>
                </li>
                <li><a href="#">Item 2.3</a>
                </li>
                <li><a href="#">Item 2.4</a>
                </li>
                <li><a href="#">Item 2.5</a>
                </li>
            </ul>
        </li>
        <li class="topmenu"><a href="#" style="height:16px;line-height:16px;">Item 3</a>
        </li>
        <li class="topmenu"><a href="#" style="height:16px;line-height:16px;">Item 4</a>
        </li>
        <li class="topmenu"><a href="#" style="height:16px;line-height:16px;">Item 5</a>
        </li>
        <li class="topmenu"><a href="#" style="height:16px;line-height:16px;">Item 6</a>
        </li>
        <li class="toplast"><a href="#" style="height:16px;line-height:16px;">Item 7</a>
        </li>
    </ul>
    <!-- End css3menu.com BODY section -->
</nav>

CSS

#hoz-menu ul#hoz-menu, ul#hoz-menu ul {
    margin:0;
    list-style:none;
    padding:0;
    background-color:#dedede;
    border-width:1px;
    border-style:solid;
    border-color:#5f5f5f;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
ul#hoz-menu ul {
    display:none;
    position:absolute;
    left:0;
    top:100%;
    -moz-box-shadow:3.5px 3.5px 5px #000000;
    -webkit-box-shadow:3.5px 3.5px 5px #000000;
    box-shadow:3.5px 3.5px 5px #000000;
    background-color:#ffffff;
    border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-color:#d4d4d4;
    padding:0 10px 10px;
}
ul#hoz-menu li:hover>* {
    display:block;
}
ul#hoz-menu li {
    position:relative;
    display:block;
    white-space:nowrap;
    font-size:0;
    float:left;
}
ul#hoz-menu li:hover {
    z-index:1;
}
ul#hoz-menu {
    font-size:0;
    width:100%;
    z-index:999;
    position:relative;
    display:inline-block;
    zoom:1;
    padding:0 0%;
    margin:0 0%;
    *display:inline;
    *padding-right:1.16%;
}
* html ul#hoz-menu li a {
    display:inline-block;
}
ul#hoz-menu>li {
    margin:0;
    width:14%;
}
ul#hoz-menu li.toplast {
    width:16%;
}
body:first-of-type ul#hoz-menu {
    display:inline-table;
    border-spacing:0px 0;
}
body:first-of-type ul#hoz-menu>li {
    display:table-cell;
    float:none;
}
ul#hoz-menu a:active, ul#hoz-menu a:focus {
    outline-style:none;
}
ul#hoz-menu a {
    display:block;
    vertical-align:middle;
    text-align:left;
    text-decoration:none;
    font:bold 14px Trebuchet MS;
    color:#000000;
    text-shadow:#FFF 0 0 1px;
    cursor:pointer;
    padding:10px;
    background-color:#FFF;
    background-image:url("mainbk.png");
    background-repeat:repeat;
    background-position:0 0;
    border-width:0 0 0 1px;
    border-style:solid;
    border-color:#C0C0C0;
}
ul#hoz-menu ul li {
    float:none;
    margin:10px 0 0;
}
ul#hoz-menu ul a {
    text-align:left;
   ...