выпадающее меню не будет идти горизонтально

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; } 

Я положил в моем родовом ул и Ли в случае что-то с этим связано. Если кто-то может помочь, я бы очень признателен.

Answer 1

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

Если убрать ширину Li-элементы будут плавать рядом друг с другом, пока не разве в малейшей комнате для того, чтобы плавать, то он сломается на новую строку.