0

私はcssとhtmlにかなり慣れていないので、cssを使用してメニューを設計しましたが、インターネットでたくさん検索した後でも、サブメニューを追加する方法が見つかりませんでした。それらは決して表示されないか、垂直になるのではなく、水平メニューに重なってしまいます

私のメニューのcssはこちらです：

#top-menu { float: left; width: 1000px; height:51px; margin-top: -30px; margin-left: 250px;  }


#top-menu ul {  list-style: none;text-align:center;
}

#top-menu li a{ position: relative; float :left;
display: block;
height: 32px;
width: 100px;
padding-top: 15px;
color: #444;
text-transform: none;
font-size: 12px;
font-weight: bold;

}

#top-menu li a:hover {
color: #f4f4f4;
background: #222;
border-bottom: 4px solid #22aed6; font-weight: bold;}

#top-menu li .active {
color: white;
background: #22aed6;
border-bottom: 4px solid #22aed6;}

およびhtmlコード：

<div id="top-menu">
<ul>
    <li><a href="index.html" class="active">Home</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="ff.html">Featured</a></li>
    <li><a href="f-e.html">Fests</a></li>
    <li><a href="fye.html">find</a></li>
    <li><a href="tip-us.html">tip US</a></li>
    <li><a href="adwus.html">Advertise</a></li>
    <li><a href="contactus.html">Contact Us</a></li>
</ul>

サブメニューの作成を手伝ってください！

私のサイトへのリンクはhttp://eventsindu.com (古いデザイン) http://eventsindu.com/test (現在取り組んでいる新しいデザイン)

4

1 に答える 1

0

サブメニューを作成するには、次のようにします。

<ul id="mainMenu">
    <li><a>blabla</a>
         <ul id="subMenu">
             <li><a>blabla2</a></li>
         </ul>
    </li>
</ul>

CSS と詳細については、このコードを参照してくださいhttp://jsfiddle.net/BVvc6/1/

Googleで10秒間検索して見つけました。

ドロップダウン ナビゲーション CSS のサブメニューに第 2 レベルを追加する方法

于 2013-03-25T15:35:41.977 に答える