下拉菜单不会水平

Question

我正在用 HTML 和 CSS 制作我的第一个网站，一切都很好，但现在我很难过。我使用 CSS 中的内联命令在标题下制作了一个非常典型的水平菜单。然后我决定我想要在我的菜单上的下拉元素，所以删除了我所有的菜单 css 并从在线水平下拉菜单的教程中复制了一些新的。下拉菜单完美运行，但现在，出于某种原因，我的菜单是垂直的！有什么想法可以让它再次水平吗？希望它应该相对容易！非常感谢。

这是我的 html（在我的 .html 表单中）

<div class="header">

<div class="topimagebox">
<img src="images/header1.jpg" class="topimage"; alt="Nets drying at Folkestone harbour";>
</div> <!--topimagebox-->

  <ul id="Menu">
    <li ><a href="index.html">Home</a></li>
    <li ><a href="About.html">About</a>
                                <ul>
                                <li ><a href="Context.html">Context</a></li>
                                <li ><a href="About.html">The Project</a></li>
                                <li ><a href="People.html">People</a></li>
                                </ul>   
                          </li>  
    <li ><a href="News.html">News</a></li>
    <li  ><a href="Publications.html">Publications</a></li>
    <li  ><a href="CaseStudies.html">Case Studies</a></li>
    <li  ><a href="Contactus.html">Contact</a>
                                <ul>
                                <li ><a href="Contactus.html">Contact</a></li>
                                <li ><a href="Getinvolved.html">Get Involved</a></li>
                                </ul>
                           </li>
    <li class="menu" ><a href="Impact.html">Impact</a></li>
    <li class="menu"><a href="Links.html">Links</a></li>
  </ul>


</div> <!--header-->

这是我的 CSS（在单独的样式表中）

div.header {
  background-color: white;
  width: 1000px;
  margin-bottom: 10px;
}
ul {
  padding: 0px;
  padding-top: 20px;
  padding-bottom: 20px;
  margin: 0px;
}


li {
  width: 850px;
  margin:0px auto 0px auto;
}

#Menu {
    margin: 0;
    padding: 0;
    height: 1em; }

#Menu li {
    list-style: none;
    float: left; }

#Menu li a {
    display: block;
    padding: 3px 8px;
    background-color: #5e8ce9;
    color: #fff;
    text-decoration: none; }

#Menu li ul {
    display: none; 
    width: 10em; /* Width to help Opera out */
    background-color: #69f;}

#Menu li:hover ul {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0; }

#Menu li:hover li {
    float: none; }

#Menu li:hover li a {
    background-color: #69f;
    border-bottom: 1px solid #fff;
    color: #000; }

#Menu li li a:hover {
    background-color: #8db3ff; }

我输入了我的通用 ul 和 li 以防万一与它有关。如果有人能提供帮助，我将不胜感激。

Answer 1

li {
  width: 850px; //<-- This is your problem.
  margin:0px auto 0px auto; 
}

如果你移除 li 元素将彼此相邻浮动的宽度，直到没有足够的空间让它浮动，然后它会分到一个新行。