なぜ私のドロップダウンメニューがdivで動作していないのですか？

Question

1. **

2. はこのメニューのための私のhtmlコードで、ドロップダウンメニューには、作業していませんwhereareそのが働いていないproperly.andこれは 一部簡単なコードであり、それがどこであろうとの事ワードプレスで埋め込まれた後に 以降

   **  
   <div class="menu-logo"> 
          <div class="container"> 
          <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> 
           <ul class="menu"> 
            <li><a href="#">HOME</a></li> 
            <li><a href="#">ABOUT US</a></li> 
               <ul class="submenu"> 
               <li><a href="#">LONG </a></li> 
               <li><a href="#">SERVICES</a></li> 
               <li><a href="#">COST</a></li> 
               </ul> 
            <li><a href= "#">ROOM</a></li> 
           </ul> 
   
          </div> 
   
       ** 
   

これはドロップダウンメニューのための私のCSSコードです。

**

 .menu-logo { 
      margin-top: 9px; 
      background: #999; 
     } 
     ul.menu { 
      list-style-type: none; 
      /* display: inline-block; */ 
      margin-top: 34px; 
      position: relative; 
     } 
     ul.menu li { 
      font-family: 'Roboto Condensed', sans-serif; 
      padding: 7px 12px 5px 12px; 
      display: inline-block; 
     } 
     ul.menu li a { 
      color: #fff; 
      font-size: 16px; 
      text-decoration: none; 
     } 
     ul.submenu { 
      display: none; 
      position: absolute; 
      background-color: #f9f9f9; 
      min-width: 160px; 
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
      z-index: 1; 
      display: none; 
      /* display: inline-block; */ 
     } 
     ul.submenu a { 
      color: black; 
      padding: 12px 16px; 
      text-decoration: none; 
      display: block; 
     } 
     ul.submenu a:hover {background-color: #f1f1f1} 
     } 
     ul li a:hover ul.submenu { 
      display: block; 
     } 

Answer 1

あなたは以下のように親LIタグ

にULタグを配置する場合、サブメニューのコードは動作します::

<div class="menu-logo"> 
       <div class="container"> 
       <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> 
        <ul class="menu"> 
         <li><a href="#">HOME</a></li> 
         <li><a href="#">ABOUT US</a> 
          <ul class="submenu"> 
           <li><a href="#">LONG </a></li> 
           <li><a href="#">SERVICES</a></li> 
           <li><a href="#">COST</a></li> 
          </ul> 
         </li>   
         <li><a href= "#">ROOM</a></li> 
        </ul> 

       </div> 

CSSコードが

に変更されます

ul li:hover ul.submenu { 
      display: block; 
     }