I have a problem with the codes in the submenu. Submenu does not work correctly and does not connect to the second menu of the button. Look at the photo and codes: enter image description here

html: 

<nav class="bottomMenu"> <ul id="dropdown_nav"> <li><a href="index.html" class="selected">Bosh Sahifa</a></li> <li><a href="instituthaqida.html">Institut haqida</a></li> <ul class="sub_nav"> <li><a href="#">Подменю #1</a></li> <li><a href="#">Подменю #2</a></li> <li><a href="#">Подменю #3</a></li> <li><a href="#">Подменю #4</a></li> </ul> <li><a href="fakultetlar.html">Fakultetlar</a></li> <li><a href="talabalaruchun.html">Talabalar uchun</a></li> </ul> **</nav><!-- конец #bottomMenu -->**

CSS - Drop-down menu:

 #dropdown_nav .sub_nav { z-index: 4; width:180px; padding:0px; position:absolute; top:42px; left:0px; border:0px solid #ddd; border-top:none; background: #000; } #dropdown_nav .sub_nav li { width:180px; padding:0px; } #dropdown_nav .sub_nav li a { background: none; font-weight: normal; font-size:15px; display:block; border-bottom:0px solid #e5e0b3; padding-left:10px; color:#fff; } #dropdown_nav .sub_nav li a:hover { background:#222; color:#0dbfe5; }

    1 answer 1

    The fact is that <ul></ul> children can only have <li></li> elements, and your <ul> contains another <ul> . The correct option is to enclose ( <ul class="sub_nav"> ) in the menu item of the parent list.

     <nav class="bottomMenu"> <ul id="dropdown_nav"> <li><a href="index.html" class="selected">Bosh Sahifa</a></li> <li><a href="instituthaqida.html">Institut haqida</a> <ul class="sub_nav"> <li><a href="#">Подменю #1</a></li> <li><a href="#">Подменю #2</a></li> <li><a href="#">Подменю #3</a></li> <li><a href="#">Подменю #4</a></li> </ul> </li> <li><a href="fakultetlar.html">Fakultetlar</a></li> <li><a href="talabalaruchun.html">Talabalar uchun</a></li> </ul> </nav>
    • THANK YOU VERY MUCH))))))) - Ash-Shakur