將鼠標懸停在菜單上 - 避免按下內容

以下是文件的樣式和html部分。關於懸停的菜單將會下降，然後移動頁面的內容。如何更改代碼，以便在懸停時顯示下拉菜單。 Z-index沒有幫助！將鼠標懸停在菜單上 - 避免按下內容

<style type="text/css"> 
     ul{ 
      padding: 0; 
      list-style: none; 
      z-index: 1; 
     } 
     ul li{ 
      float: left; 
      width: 100px; 
      text-align: center; 
     } 
     ul li a{ 
      visibility: visible; 
      display: block; 
      padding: 5px 10px; 
      color: #003333; 
      background: #FF6633; 
      text-decoration: none; 
     } 
     ul li a:hover{ 
      color: #FF6633; 
      background: #FFFF00; 
     } 
     ul li ul{ 
      visibility: hidden; 
      display: none; 
     } 
     ul li:hover ul{ 
      visibility: visible; 
      display: block; 
     } 
     </style> 

<body> 
<table border="0" align="Center"> 
<tr><td> 
    <ul> 
       <li> 
      <a href="#">LEBANESE</a> 
      <ul> 
       <li><a href="#">Falafal</a></li> 
       <li><a href="#">Hummus</a></li> 
       <li><a href="#">Baklava</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="#">ITALIAN</a> 
      <ul> 
       <li><a href="#">Pasta</a></li> 
       <li><a href="#">Rissoto</a></li> 
       <li><a href="#">Pizza</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="#">MEXICAN </a> 
      <ul> 
       <li><a href="#">Nachos</a></li> 
       <li><a href="#">Tacos</a></li> 
       <li><a href="#">Quesadilla</a></li> 
      </ul> 
     </li> 
    </ul> 
</td></tr></table> 
<table border="0" cellpadding="10" align="center"> 
<tr> 
<td></td><td></td><td></td><td></td> 
<td> 
<div> 
Welcome to FoodWiki! 
The mission of FoodWiki is to help people map out and explore new food spaces. Through this mission, we hope to enable people to both enjoy food more and live healthier, fuller lives. 

The FoodWiki site is a wiki-style data repository to capture and analyze food related information of all kinds. Currently the database contains detailed nutritional information from the USDA nutrient database (sr22), Danish food database, and annotation information from LanguaL. 

Using this repository, we've developed vProtein, a computational tool for exploring how plant-based foods can be used as sources of protein. We've published a scientific paper about vProtein and issued a press release that includes some recipes you can try. 

Future plans include annotating recipes, food attributes, flavor comparisons, and other food based information. If you have ideas or requests for features, please leave us a comment or email us. 

For a guided tour of the features we have online now, please see the overview. 

Explore, eat, and enjoy! 
</div> 
<td></td><td></td><td></td><td></td> 
<table id="tab" border="0" align="center"> 
<tr> 
<td> <image src="css/images/pizza.jpg" height="150" width="150"> </td> 
<td> <image src="css/images/nacho.jpg" height="150" width="150"> </td> 
<td> <image src="css/images/falafal.jpg" height="150" width="150"> </td> 
<td> <image src="css/images/ques.jpg" height="150" width="150"> </td> 
<td> <image src="css/images/rissoto.jpg" height="150" width="150"> </td> 
</tr></table> 
</body>

來源

2014-05-02 Prarthana Hegde

。 –

...和**不使用表佈局**！重要 –

您只需要將父容器的位置設置爲relative，然後將子元素設置爲相對於父容器的絕對位置。這裏有一個小提琴向您展示如何設置它： http://jsfiddle.net/S7SYA/2/

ul{ 
    padding: 0; 
    list-style: none; 
    z-index: 1; 
    position:relative; 
} 
ul li:hover ul{ 
    visibility: visible; 
    display: block; 
    position:absolute; 
}

來源

2014-05-02 16:17:45 ReLeaf

可能工作，但在表內，定位並不總是如你所料。 –

你回答得更快，而我創造了小提琴....同樣在這裏：http://jsfiddle.net/mrbx3/ – LcSalazar

所以我所要做的就是使用表格和div！？非常感謝！ :) –

z-index僅適用於已獲得的位置absolute或relative元素。

也爲了更安全的一面，將position:relative添加到父元素。

來源

2014-05-02 16:20:08

好吧，謝謝你！ –

如果我的解決方案適合您。那麼你可以接受答案 –

它不完全幫助！ –

position:relative;上慄和position:absolute;top:100%;在UL

同時使用`Z-index`總是使用`position`看到這個example

來源

2014-05-02 16:32:15

將鼠標懸停在菜單上 - 避免按下內容

回答

相關問題