Дропмену Проблема не отображается с html и css

Question

ul#menu li ,ul.sub-menu li { list-style-type: none; float:left; } 
ul#menu li a ,ul.sub-menu li a  
{ display: inline-block; width: 150px; height: 40px; text-decoration: none; line-height: 40px; text-align: center; color:rgb(235, 139, 13); background-color:black; border-radius: 20px; } 
 ul#menu li a:hover ,ul.sub-menu li a:hover { background-color: crimson; font-weight: bold; color:white; display: block; border-radius: 20px;
}

ul#menu li { position: relative;

} ul#menu li ul.sub-menu { display:none; position: absolute; top: 30px; left: 0px; width: 100px;

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

}

Dropdown Menu

menu1
menu2
submenu1
submenu2
submenu3
submenu4
     </li>

 </ul>

Answer 1

Измените ul#menu li :hover ul.sub-menu на ul#menu li:hover ul.sub-menu. Это единственная проблема, которую я вижу при условии, что ваш HTML может быть таким, как показано ниже.

<ul id="menu">
    <li>
      <a href="#">menu1</a>
    </li>
    <li>
      <a href="#">menu2</a>
      <ul class="sub-menu">
        <li>
          <a href="#">submenu1</a>
          <a href="#">submenu2</a>
          <a href="#">submenu3</a>
          <a href="#">submenu4</a>
        </li>
      </ul>
    </li>
  </ul>