下拉菜單排列

Question

我嘗試使用CSS 在這裏HTML創建下拉菜單的代碼

<style type="text/css"> 
.men_tp ul{ margin:0px; padding:0px;} 
.men_tp ul li{ display:inline-block; position:relative;} 
.men_tp ul li a{ text-decoration:none; font-size:11px; color:#000000; } 
.men_tp ul li ul{ display:none; } 
.men_tp ul li:hover ul { display: block; position:absolute; width:150px; top:21px; background-color:#000; } 
.men_tp ul li ul li{ display: block; border-bottom:1px solid #999999; line-height:25px; } 
.men_tp ul li ul li a{ color:#FFFFFF; } 

</style> 

<div class="men_tp"> 

<ul> 
<li><a href="index.html">HOME</a></li> 
<li><img src="images/line.gif" width="2" height="14" alt="" class="flt" style="margin-left:20px;" /></li> 
<li><a href="About Us.html">ABOUT US</a></li> 
<li><img src="images/line.gif" width="2" height="14" alt="" class="flt" style="margin-left:20px;" /></li> 
<li><a href="#">TRAINING</a></li> 
<li> <img src="images/line.gif" width="2" height="14" alt="" class="flt" style="margin-left:20px;" /></li> 
<li><a href="#">PUBLISHING</a> </li> 
<li><img src="images/line.gif" width="2" height="14" alt="" class="flt" style="margin-left:20px;" /></li> 
<li><a href="#">CONFERENCES</a></li> 
<li><img src="images/line.gif" width="2" height="14" alt="" class="flt" style="margin-left:20px;" /></li> 
<li><a href="#">RESEARCH</a> 
<ul> 
     <li><a href="#">GLTR Journals</a></li> 
     <li><a href="#">Data collection Services</a></li> 
     <li><a href="#">Edit and Proof Reading</a></li> 
    </ul> 
</li> 
<li><img src="images/line.gif" width="2" height="14" alt="" class="flt" style="margin-left:20px;" /></li> 
<li><a href="#">CONTACT US</a> 
<ul> 
     <li><a href="#">HTML</a></li> 
     <li><a href="#">CSS</a></li> 
    </ul> 
</li> 
</ul> 


    </div> 

但是當我這個代碼就說明我這個樣子

時我在研究上拖動鼠標，然後下拉菜單，然後它消失，我無法點擊任何文本，如GLTR Journals等，也想右鍵另一個下拉菜單，當我將鼠標懸停在GLTR日記上時，它會顯示另一個菜單

第二圖像

2nd image

任何幫助嗎？

thankx

Answer 1

我想你想要這樣的：

.men_tp ul { 
 
    margin:0px; 
 
    padding:0px; 
 
} 
 
.men_tp ul li { 
 
    display:inline-block; 
 
    position:relative; 
 
} 
 
.men_tp ul li a { 
 
    text-decoration:none; 
 
    font-size:11px; 
 
    color:#000000; 
 
} 
 
.men_tp ul li ul { 
 
    display:none; 
 
} 
 
.men_tp ul li ul li ul { 
 
    display:none !important;/*Add display none in nested ul*/ 
 
} 
 
.men_tp ul li ul li:hover ul { 
 
    display: block !important;/*Add display block in nested ul*/ 
 
    position:absolute; 
 
    width:150px; 
 
    background-color:#000; 
 
    left: 150px; 
 
    top: 0px; 
 
} 
 
.men_tp ul li:hover ul { 
 
    display: block; 
 
    position:absolute; 
 
    width:150px; 
 
    background-color:#000; 
 
} 
 
.men_tp ul li ul li { 
 
    display: block; 
 
    border-bottom:1px solid #999999; 
 
    line-height:25px; 
 
} 
 
.men_tp ul li ul li a { 
 
    color:#FFFFFF; 
 
}

<div class="men_tp"> 
 
    <ul> 
 
     <li><a href="index.html">HOME</a> 
 

 
     </li> 
 
     <li> 
 
      <img src="images/line.gif" width="2" height="14" alt="" class="flt" style="margin-left:20px;" /> 
 
     </li> 
 
     <li><a href="About Us.html">ABOUT US</a> 
 

 
     </li> 
 
     <li> 
 
      <img src="images/line.gif" width="2" height="14" alt="" class="flt" style="margin-left:20px;" /> 
 
     </li> 
 
     <li><a href="#">TRAINING</a> 
 

 
     </li> 
 
     <li> 
 
      <img src="images/line.gif" width="2" height="14" alt="" class="flt" style="margin-left:20px;" /> 
 
     </li> 
 
     <li><a href="#">PUBLISHING</a> 
 
     </li> 
 
     <li> 
 
      <img src="images/line.gif" width="2" height="14" alt="" class="flt" style="margin-left:20px;" /> 
 
     </li> 
 
     <li><a href="#">CONFERENCES</a> 
 

 
     </li> 
 
     <li> 
 
      <img src="images/line.gif" width="2" height="14" alt="" class="flt" style="margin-left:20px;" /> 
 
     </li> 
 
     <li><a href="#">RESEARCH</a> 
 

 
      <ul> 
 
       <li><a href="#">GLTR Journals</a> 
 

 
        <ul> 
 
         <li><a href="#">test</a> 
 

 
         </li> 
 
         <li><a href="#">test</a> 
 

 
         </li> 
 
         <li><a href="#">test</a> 
 

 
         </li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">Data collection Services</a> 
 

 
       </li> 
 
       <li><a href="#">Edit and Proof Reading</a> 
 

 
       </li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <img src="images/line.gif" width="2" height="14" alt="" class="flt" style="margin-left:20px;" /> 
 
     </li> 
 
     <li><a href="#">CONTACT US</a> 
 

 
      <ul> 
 
       <li><a href="#">HTML</a> 
 

 
       </li> 
 
       <li><a href="#">CSS</a> 
 

 
       </li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</div>