JSFiddle - React, Tailwind, and code Playground

by IllusionMH

HTML

<ul id="men">
    <li><a href="#"><b>Это нечто</b></a>
        <ul>
            <li><a href="#">Часть1</a></li>
            <li><a href="#">Часть2</a>
                <ul>
                    <li><a href="#">чего-то</a></li>
                    <li><a href="#">Му-ха-ха</a></li>
                    <li><a href="#">Фрагмент</a></li>
                </ul>
            </li>
            <li><a href="#">Часть3</a></li>
        </ul>
    </li>
</ul>

CSS

/*стили неактивного состояния элементов*/
#men, #men ul {
    list-style:none;
    margin:0;
    padding:0;
    background-color: #444444;
    font:12px/28px Verdana, Arial, Helvetica, sans-serif;
}

#men {
    height:28px;
    width:121px;
    border:1px solid #000;
}

#men li{
    float:left;
    position:relative;
}

#men a{
    display:block;
    width:80px;
    color:#fff;
    padding:0 20px;  
    text-align:center;
    text-decoration:none;
    border-right:1px solid #000;
} 

/*сгрупировал стили при наведении*/
#men li:hover, #men li.ie6hover{
    background-color: #ccc;
}

#men  li:hover > a{/*селектор потомка работает с ИЕ7+*/
    color:#000;
}

/*стили ниже не трогал*/
#men ul{
    border:1px solid #000;
    border-top:0;
    border-bottom:0;
    visibility:hidden;
    width:118px;
    position:absolute;
    top:28px;
    left:0;
}

#men ul a{
    border:0;  
    border-bottom:1px solid #000;
    width:78px;
}

#men li:hover ul, #men li.ie6hover ul{
    visibility:visible;
}
 
#men li:hover li ul, #men li.ie6hover li ul{
    border-top:1px solid #000;
    top:-1px;
    left:118px;
    visibility:hidden;
}

#men li:hover li:hover  ul, #men li.ie6hover li.ie6hover ul{
    visibility:visible;
}