The submenu does not work correctly. It is necessary that when you hover the cursor, the submenu opens, but it turns out it is constantly opened. I can not figure out what the error is.

<ul id="dropdown_nav"> <li><a href="#">Категория</a> <ul class="sub-menu"> <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="#">Категория 1</a></li> <li><a href="#">Категория 2</a></li> <li><a href="#">Категория 3</a></li> <li><a href="#">Категория 4</a></li> </ul> 

CSS:

 #dropdown_nav, #dropdown_nav li{ margin:0; padding:0; font-weight:bold; display:inline-block; list-style:none; border-bottom:0px solid #777; margin-top:18px; } #dropdown_nav{ background:#323232; } #dropdown_nav li{ display:inline-block; float:left; position:relative; } #dropdown_nav a{ display:block; color:#fff; text-decoration:none; padding:15px 22px 20px 22px; background: url(images/linemenu.png) right no-repeat; font-weight:100; font-size:18px; } #dropdown_nav li a:hover { background: #000; text-decoration:none; color:#0dbfe5; } #dropdown_nav .sub-menu{ 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-menu li{ width:180px; padding:0px; } #dropdown_nav .sub-menu 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-menu li a:hover { background:#222; color:#0dbfe5; text-align:left; } 

    2 answers 2

    Forgot to add display:none and

      #dropdown_nav li:hover>.sub-menu{ display:block; } 

     #dropdown_nav, #dropdown_nav li{ margin:0; padding:0; font-weight:bold; display:inline-block; list-style:none; border-bottom:0px solid #777; margin-top:18px; } #dropdown_nav{ background:#323232; } #dropdown_nav li{ display:inline-block; float:left; position:relative; } #dropdown_nav a{ display:block; color:#fff; text-decoration:none; padding:15px 22px 20px 22px; background: url(images/linemenu.png) right no-repeat; font-weight:100; font-size:18px; } #dropdown_nav li a:hover { background: #000; text-decoration:none; color:#0dbfe5; } #dropdown_nav li:hover>.sub-menu{ display:block; } #dropdown_nav .sub-menu{ z-index: 4; width:180px; padding:0px; position:absolute; top:42px; left:0px; border:0px solid #ddd; border-top:none; background: #000; display:none; } #dropdown_nav .sub-menu li{ width:180px; padding:0px; } #dropdown_nav .sub-menu 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-menu li a:hover { background:#222; color:#0dbfe5; text-align:left; } 
     <ul id="dropdown_nav"> <li><a href="#">Категория</a> <ul class="sub-menu"> <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="#">Категория 1</a></li> <li><a href="#">Категория 2</a></li> <li><a href="#">Категория 3</a></li> <li><a href="#">Категория 4</a></li> </ul> 

    • Super! Thank you very much!!! - Sasha

    Missing closing tag </li> after <li><a href="#">Категория 4</a></li> .