Горизонтальное меню

HTML

<div id="">
 <ul class="menu" id="yw3">
<li><a href="/menu/1">menu1</a>
<ul>
<li><a href="/catalog/index">catalog1</a>
    <ul>
        <li><a href="/category/index">category1</a></li>
        <li><a href="/category/index">category2</a></li>
        <li><a href="/category/index">category3</a></li>
    </ul>
</li>
<li><a href="/catalog/index">catalog2</a></li>
<li><a href="/catalog/index">catalog3</a></li>
<li><a href="/catalog/index">catalog4-catalog4</a></li>
</ul>
</li>
<li><a href="/menu/2">menu2</a></li>
<li><a href="/menu/3">menu3</a></li>
</ul>    
</div>

CSS

.menu, .menu UL {
    margin: 0;
    padding: 0; 
    list-style: none;
    /*opacity: 0.5; *//* Полупрозрачность элемента */
}


.menu A {
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    display: block;
    text-decoration: none;
    padding: 5px 10px 5px 10px;
    background: #bbbbbb;
    white-space:nowrap;
}

.menu>LI {
    float: left;
    position: relative;

}

.menu UL LI {
    width: 100%;
}

.menu>UL LI:last-child a {
    border-radius: 0px 0px 5px 5px;
}


.menu LI:hover>UL {
    display: block;
}

.menu>LI>UL {
    position: absolute;
    display: none;

}


.menu LI>UL>LI>UL {
    display: none;
}