html - CSS Issue UL 垂直下降而不是水平下降

Question

我的 Css 菜单在我第一次设置时没有问题，然后当我关闭 I10 并重新打开时，菜单是垂直的。看看我的代码。

/** MENU */

#menu {
overflow: hidden;
background: #101010;
}

#menu ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px;
list-style: none;
line-height: normal;
}

#menu li {
display: inline-block;
}

#menu a {
display: block;
padding: 0px 40px 0px 40px;
line-height: 70px;
text-decoration: none;
text-transform: uppercase;
text-align: center;
font-size: 16px;
font-weight: 200;
color: rgba(255,255,255,0.5);
border: none;
}

#menu a:hover, #menu .current_page_item a {
text-decoration: none;
color: rgba(255,255,255,0.8);
}

#menu .current_page_item a {
}

#menu .last {
border-right: none;
}

请让我知道哪里出错了。

HTML:

<div id="wrapper">
<div id="header-wrapper">
    <div id="header" class="container">
        <div id="logo">
            <h1><a href="#">Investment Services</a></h1>

        </div>
        <div id="social">
            <ul class="contact">

            </ul>
        </div>
    </div>
    <div id="menu" class="container">
        <ul>
            <li class="current_page_item"><a href="#" accesskey="1" title="">Homepage</a></li>
            <li><a href="#" accesskey="1" title="">Procedures</a></li>
            <li><a href="#" accesskey="2" title="">Task Rota</a></li>
            <li><a href="#" accesskey="3" title="">Docs & Links</a></li>
            <li><a href="#" accesskey="4" title="">Contact Us</a></li>
            <li><a href="#" accesskey="5" title="">Feedback</a></li>
        </ul>
    </div>
</div>

Answer 1

在这种情况下，<ul>通常不是问题 - 这是 <li>

你最好使用类似这样的东西来创建水平菜单:

ul {
    display: block
    margin: 0;
    padding: 0;
    list-style: none;
}

li {
   display: inline-block;
   float: left;
}

---

更新

根据 this JSFiddle , 你的菜单是水平显示的？