CSS 菜单在 IE 中不起作用答案

【问题标题】：CSS menu dont work in IECSS 菜单在 IE 中不起作用
【发布时间】：2012-02-20 16:52:38
【问题描述】：

我做错了什么，在 IE 中菜单不能像在其他浏览器中那样工作。在 IE 中，菜单按钮是垂直的而不是水平的。链接到测试子域：http://test.beterlopenwinkel.nl/leiderdorp.php 而且我也无法摆脱 IE 中的那种列表样式。

CSS：

#navigation{
width:200px;
background-image: -moz-linear-gradient(left, orange, #f3980b); /* FF3.6 */
background-color:orange;
border-radius:8px;
font-size:16px;
font-weight:bold;
text-align:center;
width:1000px;
height:30px;
}

#navigation ul{
margin:0px; 
padding:0px;
}

#navigation ul li{
display:inline; 
list-style-type:none ;
padding:5px 10px 5px 10px; //dropmenupadding
margin-left:15px;
position:relative;
}

#navigation li a{
color:#fff; 
text-decoration:none;
padding:5px 10px 5px 10px;
display:inline;
}

#navigation li a:hover{
text-decoration:none;
//background-color:orange;
//border-radius:15px;
//border:solid 2px #333;
color:#333;
}

#navigation li ul{ //dropmenu
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
top:35px;
background-color:orange;
border-radius:15px;
box-shadow:0px 0px 5px #000;
}

#navigation li:hover ul{ 
display:block;
width:160px;
}

#navigation li li{ 
list-style:none;
display:list-item;
}

#navigation li li a{
color:#fff; 
text-decoration:none;
padding:10px;
}

#navigation li li a:hover{
text-decoration:none;
}

【问题讨论】：

你指的是哪个版本的IE？

标签： css internet-explorer menu drop-down-menu

【解决方案1】：

对于初学者，您可能需要确保您的 HTML 是有效的。在此处检查 W3 验证器：

http://validator.w3.org/check?uri=http%3A%2F%2Ftest.beterlopenwinkel.nl%2Fleiderdorp.php&charset=%28detect+automatically%29&doctype=Inline&group=0

无效标记是 CSS 在不同浏览器（不仅仅是 IE）中以意想不到的方式表现的 #1 原因

【讨论】：

【解决方案2】：

首先，您需要修复 HTML：

<ul>
<li><a href="http://www.beterlopenwinkel.nl/solidus.php">Solidus</a></li>
<li><a href="http://www.beterlopenwinkel.nl/finn_comfort.php">Finn Comfort</a></li>
<li><a href="http://www.beterlopenwinkel.nl/think.php">Think!</a></li>
<li><a href="http://www.beterlopenwinkel.nl/footnotes.php">Footnotes</a></li>
<li><a href="http://www.beterlopenwinkel.nl/mbt.php">MBT</a></li>
<li><a href="http://www.beterlopenwinkel.nl/vabeene.php">Vabeene</a></li>
<li><a href="http://www.beterlopenwinkel.nl/meindl.php">Meindl</a></li>
<li><a href="http://www.beterlopenwinkel.nl/stadler.php">Stadler</a></li>
<li><a href="http://www.beterlopenwinkel.nl/fit_flop.php">Fit Flop</a></li>
<li><a href="http://www.beterlopenwinkel.nl/durea.php">Durea</a></li>
<li><a href="http://www.beterlopenwinkel.nl/van_lier.php">Van Lier</a></li>
<li><a href="http://www.beterlopenwinkel.nl/schneider.php">Schneider</a></li>
</li> **THE LI SHOULD BE CLOSED AFTER THE UL, LIKE YOU DID FOR OTHER SUBMENUs**
</ul>

【讨论】：