Dropdown Menu

HTML

<ul id="nav">
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">Archive&#9662;</a>
        <ul>
            <li>
                <a href="http://example.com">Alpha Example</a>
            </li>
            <li>
                <a href="http://example.com">Hover For More &#9656;</a>
                <ul>
                    <li><a href="http://example.com">Sub Menu Item</a></li>
                    <li><a href="http://example.com">Sub Menu Item</a></li>
                    <li><a href="#">Sub Menu Item</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Beta Example</a>
            </li>
        </ul>
    </li>
    <li>
        <span>About&#9662;</span>
        <ul>
            <li class="status1"><a href="http://example.com">Alpha Example</a></li>
            <li><a href="#">Beta Example</a></li>
            <li><a href="#">Gamma Example</a></li>
        </ul>
    </li>
</ul>
<div onmousemove="void(0)">Other Element</div>

CSS

/* main menu */
#nav {
    display: inline-block;
    padding: 0;
    line-height: 2em;
    background: #ddd;
}
#nav li {
    list-style-type: none;
    float: left;
    padding: 0 .5em;
    position: relative;
      
}
.status1{
   background: #ff9500; 
}
#nav li a {
    text-decoration: none;

}

/* level 1 sub menu */
#nav li > ul {
    display: none;
    padding: 0;
    background: #ddd;
    position: absolute;
    top: 2em;
    left: 0;
    width: 160px;
    border: 1px solid gray;
}
#nav li ul li {
    padding: 0 .5em;
    margin: 0;
    position: relative;
}
#nav li:hover > ul {
    display: block;
}
#nav li:hover > ul li {
    list-style-type: none;
    float: none;
}

/* level 2 sub menu */
#nav li ul li ul {
    display: none;
    position: absolute;
    top: 0px;
    left: 161px;
    width: 160px;
}
#nav li ul li:hover > ul {
    display: block;
}