Html CSS下拉菜单不适用于IE和Chrome
我有一个下拉菜单,它不适用于Internet Explorer 10(和兼容模式)和Chrome。不过,它确实适用于Firefox(最新版本) CSS:Html CSS下拉菜单不适用于IE和Chrome,html,css,webkit,gecko,Html,Css,Webkit,Gecko,我有一个下拉菜单,它不适用于Internet Explorer 10(和兼容模式)和Chrome。不过,它确实适用于Firefox(最新版本) CSS: #menu_items { float: left; width: 600px; } #menu { margin:0; float: left; } #menu li { padding: 0 0 0 0px; list-style: none; margin: 2px 0 0 0; displa
#menu_items
{ float: left;
width: 600px;
}
#menu
{ margin:0;
float: left;
}
#menu li
{
padding: 0 0 0 0px;
list-style: none;
margin: 2px 0 0 0;
display: inline;
background: transparent;
}
#menu li a{
float: left;
font: bold 120% Arial, Helvetica, sans-serif;
text-align: center;
color: #FFF;
text-decoration: none;
height: 24px;
text-shadow: 0px 1px 0px #000;
padding: 16px 0px 10px 40px;
background: transparent;
}
#menu li ul li a {
float: left;
font: bold 90% Arial, Helvetica, sans-serif;
text-align: center;
color: #FFF;
text-decoration: none;
height: 24px;
text-shadow: 0px 1px 0px #000;
padding: 16px 0px 10px 40px;
background: transparent;
}
#menu li:hover ul {
display: flex;
float:inherit;
text-shadow: 0px 1px 0px #000;
padding: 1px 40px 0px 0px;
background: #669CD8;
background: -moz-linear-gradient(#90B9E2, #4B75AF);
background: -o-linear-gradient(#90B9E2, #4B75AF);
background: -webkit-linear-gradient(#90B9E2, #4B75AF);
margin: 50px 0px 0px 0px;
border-style:solid;
border-width:1px;
z-index: 2;
}
#menu li ul {
display: none;
position: absolute;
}
#menu li.current a, ul#menu li:hover a
{
color: #FFF;
text-decoration: underline;
}
<div id="menu_items">
<ul id="menu">
<li class="current"><a href="index.html">Home</a></li>
<li><a href="werkwijze.html">Werkwijze</a></li>
<li><a href="#">Producten</a>
<ul>
<li><a href="klimaat.html" id="klimaat">Klimaat</a></li>
<li><a href="voerbakken.html" id="voerbakken">Voerbakken</a></li>
<li><a href="voerinstallatie.html" id="voerinstallatie">Voerinstallatie</a></li>
<li><a href="kraamhokken.html" id="kraamhokken">Kraamhokken</a></li>
<li><a href="boxen.html" id="boxen">Boxen</a></li>
<li><a href="bighok.html" id="bighok">Biggen hokken</a></li>
<li><a href="roosters.html" id="roosters">Roosters</a></li>
<li><a href="silos.html" id="silos">Silo's</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
HTML:
#menu_items
{ float: left;
width: 600px;
}
#menu
{ margin:0;
float: left;
}
#menu li
{
padding: 0 0 0 0px;
list-style: none;
margin: 2px 0 0 0;
display: inline;
background: transparent;
}
#menu li a{
float: left;
font: bold 120% Arial, Helvetica, sans-serif;
text-align: center;
color: #FFF;
text-decoration: none;
height: 24px;
text-shadow: 0px 1px 0px #000;
padding: 16px 0px 10px 40px;
background: transparent;
}
#menu li ul li a {
float: left;
font: bold 90% Arial, Helvetica, sans-serif;
text-align: center;
color: #FFF;
text-decoration: none;
height: 24px;
text-shadow: 0px 1px 0px #000;
padding: 16px 0px 10px 40px;
background: transparent;
}
#menu li:hover ul {
display: flex;
float:inherit;
text-shadow: 0px 1px 0px #000;
padding: 1px 40px 0px 0px;
background: #669CD8;
background: -moz-linear-gradient(#90B9E2, #4B75AF);
background: -o-linear-gradient(#90B9E2, #4B75AF);
background: -webkit-linear-gradient(#90B9E2, #4B75AF);
margin: 50px 0px 0px 0px;
border-style:solid;
border-width:1px;
z-index: 2;
}
#menu li ul {
display: none;
position: absolute;
}
#menu li.current a, ul#menu li:hover a
{
color: #FFF;
text-decoration: underline;
}
<div id="menu_items">
<ul id="menu">
<li class="current"><a href="index.html">Home</a></li>
<li><a href="werkwijze.html">Werkwijze</a></li>
<li><a href="#">Producten</a>
<ul>
<li><a href="klimaat.html" id="klimaat">Klimaat</a></li>
<li><a href="voerbakken.html" id="voerbakken">Voerbakken</a></li>
<li><a href="voerinstallatie.html" id="voerinstallatie">Voerinstallatie</a></li>
<li><a href="kraamhokken.html" id="kraamhokken">Kraamhokken</a></li>
<li><a href="boxen.html" id="boxen">Boxen</a></li>
<li><a href="bighok.html" id="bighok">Biggen hokken</a></li>
<li><a href="roosters.html" id="roosters">Roosters</a></li>
<li><a href="silos.html" id="silos">Silo's</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
-
您的菜单可能未正确清除。您有很多浮动元素,这可能会导致渲染错误。当您浮动一个元素时,您将使该元素“停止流动”。基本上,元素将忽略它在DOM中的位置,并尝试滑动到您在浮动中设置的一侧。如果包装器内的所有子元素都处于浮动状态,则父元素不再知道它应该有多高(因为所有元素都不流动),它会将自身设置为0px高度或流中最高元素的高度。要解决这个问题,您需要一个新的解决方案。这将告诉浏览器清除容器的子容器。希望这能解决你的问题 在#菜单li:hover ul
的规则中,使用显示:块代码>而不是显示:flex代码>。(请参阅上的演示。)
并非所有浏览器都支持display:flex
——请参阅。chrome和Internet Explorer等浏览器不支持某些CSS语法。。像-moz线性梯度蚀刻为什么还有-o-linear-gradient和-webkit线性梯度你能更具体地说明什么不起作用吗?我没有看到任何在FF中工作的东西w/@KatieK将鼠标悬停在“producten”上,它在FF中为我工作@selten98-FWIW,在Firefox21中将鼠标悬停在“Producten”上时不会显示任何内容,但在FF22中会出现新的选项。