将鼠标悬停在菜单上 - 避免按下内容

以下是文件的样式和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

将鼠标悬停在菜单上 - 避免按下内容

回答

相关问题