Question

我正在制作我的第一个使用HTML和CSS的网站，这一切都很好，但现在我很难过。我使用CSS中的inline命令在我的标题下创建了一个非常典型的水平菜单。然后我决定要在我的菜单上删除元素，所以删除了我的所有菜单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元素将彼此相邻浮动，直到它没有空间漂浮，然后它会突破到一个新行。

下拉菜单不会水平

1 个答案: