css + html菜單hitbox

我用不同的網絡源編寫了一些代碼。我遇到了一個問題 - 菜單底部的每個對象都無法與之交互。菜單會干擾下拉菜單下方的所有內容。css + html菜單hitbox

<style> 
body { 
    padding: 0; 
    margin: 0; 
    font-family: Arial; 
    font-size: 23px; 
} 
#nav { 
    background-color:1a1a1a; 
    opacity: 0.9; 
} 
#nav_wrapper { 
    width: 960px; 
    margin: 0 auto; 
    text-align: right; 
} 
#nav ul { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    position: relative; 
    min-width: 200px; 
} 
#nav ul li { 
    display: inline-block; 
} 
#nav ul li:hover { 
    background-color: #333; 
} 
#nav ul li a, visited { 
    color: #CCC; 
    display: block; 
    padding: 15px; 
    text-decoration: none; 
} 
#nav ul li:hover ul { 
    display: block; 
} 
#nav ul ul { 
    display: none; 
    position: absolute; 
    background-color: #333; 
    border: 0px solid #222; 
    border-top: 0; 
    margin-left: -5px; 
} 
#nav ul ul li { 
    display: block; 
} 
#nav ul ul li a:hover { 
    color: #699; 
} 
.left-to-right { 
    text-align: left; 
} 
</style> 
<html lang="he"> 
<body dir-"rtl"><div id="nav"> 

    <div id="nav_wrapper"> 
<div> 
     <ul <ul dir="RTL"> 

      <li> <a href="#">תרמילים</a> 

       <ul class="left-to-right"> 
<!-- <li class="backpacks" id="firstlight-20l"> <a href="/products/firstlight-20l"> FirstLight 20L</a> </li> 

         <li class="backpacks" id="firstlight-30l"> <a href="/products/firstlight-30l"> FirstLight 30L</a> </li> 

         <li class="backpacks" id="firstlight-40l"> <a href="/products/firstlight-40l"> FirstLight 40L</a> </li>--> 

         <li class="backpacks"> <a href="/products/rotation180-professional-Deluxe"> rotation180° Professional 38L Deluxe</a> </li> 

         <li class="backpacks"> <a href="/products/rotation180-horizon"> rotation180° Horizon 34L</a> </li> 

         <li class="backpacks"> <a href="/products/rotation180-panorama"> rotation180° Panorama 22L</a> </li> 

<!--      <li class="backpacks" id="rotation180-travel-away"> <a href="/products/rotation180-travel-away"> rotation180° Travel Away 22L</a> </li>--> 

         <li class="backpacks" id="rotation180-trail"> <a href="/products/rotation180-trail"> rotation180° Trail 16L</a> </li> 

         </ul> 
      </li> 
      <li> <a href="#">תיקי מצלמות ספורט</a> 

       <ul class="left-to-right"> 
        <li><a href="#">GP 1 kit case</a> 
        </li> 
        <li><a href="#">GP 2 kit case</a> 
        </li> 
       </ul> 
      </li> 
      <li> <a href="#">אביזרים</a> 

       <ul class="left-to-right"> 
        <li><a href="#">r180º Panorama/Horizon Photo Insert</a> 
        </li> 

       </ul> 
      </li> 

     </ul> 
</div> 
    </div> 
</div> 
</body> 
</html>

來源

2015-07-03 jorden carmi

其下拉列表？解釋 – Era

他們是正確的在我的電腦瀏覽器！好，現在我明白了，你想讓菜單內容留下。 –

只需在CSS中爲'#nav ul ul'添加'text-align：left;'。讓我知道它是否有效。 –

#nav_wrapper ul ul li{ text-align:left;}

你需要添加這隻：demo

來源

2015-07-03 12:49:49 Era

您可能能夠使用垂直排列的列表元素的鏈接&文本對齊。

來源

2015-07-03 12:49:49 AxeChops

只是一個類添加到每個下拉的<ul>標籤，並添加text-align: left它。

FIDDLE Here

來源

2015-07-03 12:51:57

css + html菜單hitbox

回答

相關問題