1

HTML と CSS を使用して初めての Web サイトを作成していますが、すべてうまくいきましたが、今は困惑しています。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を入れました。誰かが助けてくれれば、本当に感謝しています。

4

1 に答える 1

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

幅を削除すると、li 要素が互いに隣り合って浮動し、浮動する余地がなくなるまで、新しい行に分割されます。

于 2013-09-02T14:36:20.007 に答える