html - CSS と HTML を使用してドロップダウン メニューを作成する

Question

4 列のサブメニューを持つナビゲーション バーを作成しようとしています。ほとんどのことをコーディングしましたが、サブメニューを作成するときに問題が見つかりました。

これは私のHTMLです：

<div id="navigation">
    <ul>
        <li class="current">
            <a href="" class="">Home</a>
        </li>
        <li class="sub-menu">
            <a href="">Our Products</a>
            <div class="subnav product">
                <div class="content">
                    <div class="col">
                        <ul>
                            <li class="one">
                                <a href="">Main Menu Item</a>
                            </li>
                            <li class="one">
                                <a href="">Main Menu Item</a>
                            </li>
                            <li class="one">
                                <a href="">Main Menu Item</a>
                            </li>
                        </ul>
                    </div>
                    <div class="col">
                        <ul>
                            <li class="two">
                                <img src="" />
                                <a href="">Promoting Peace in the Niger Delta</a>
                            </li>
                            <li class="three">
                                <img src="" />
                                <a href="">Promoting Peace in the Niger Delta</a>
                            </li>
                            <li class="four">
                                <img src="" />
                                <a href="">Promoting Peace in the Niger Delta</a>
                            </li>
                            <li class="five">
                                <img src="" />
                                <a href="">Promoting Peace in the Niger Delta</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
        <li class="">
            <a href="">Service Maintenance</a>
        </li>
        <li class="sub-menu">
            <a href="">Frequently Ask Questions</a>
        <li class="sub-menu">
            <a href="">Our Products</a>
            <div class="subnav product">
                <div class="content">
                    <div class="col">
                        <ul>
                            <li class="one">
                                <a href="">Main Sub Item</a>
                            </li>
                            <li class="one">
                                <a href="">Main Sub Item</a>
                            </li>
                            <li class="one">
                                <a href="">Main Sub Item</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
    </ul>               
</div>

誰かが私を助けてくれることを願っています。ありがとうございました。

Answer 1

問題は、コンテナの幅が 300px で定義されていることです

#navigation ul li > div.product {
    width: 300px;
}

そして、その子要素がそのスペースの 100% を占めています。そのため、左に浮く余地があることを確認する必要があります。

#navigation div.col {
float: left;
    height:200px;
    width: 25%;
}

うまくいけば、それはあなたの質問に役立ちます.

フィドル

Answer 2

このhttp://jsfiddle.net/qtvVK/11/embedded/result/を確認してください。

マークアップにいくつかの変更を加えdisplay:inline-block;、フローティング要素の代わりに使用しました

関連する CSS スタイル

/* Dropdown styles */
 #navigation ul > li > ul.sub-menu {
    display: none;
    position:absolute;
    padding:10px 0;
    background:#fff;
    border: 1px solid #DDDCDC;
    top: 24px;
    z-index: 1;
}
/* Show dropdown when hover */
 #navigation ul > li:hover > ul.sub-menu {
    display:block;
}
.row {
    width:auto;
    white-space: nowrap;
}
.col {
    display: inline-block;
    vertical-align: top;
    padding: 0 10px;
}

Answer 3

CSS

ul li ul
{
    display: none;
    position: fixed;
    margin-left: 191px;
    margin-top: -37px; 
}
ul li:hover ul
{
    display: block; 
}

ul li a:hover
{
    color: #fff;
    background: #939393;
    border-radius:20px;
}

 ul li a
{
    display: block;
    padding: 10px 10px;
    color: #333;
    background: #f2f2f2;
    text-decoration: none;

}
ul
{
   background: #f2f2f2;
   list-style:none;
   padding-left: 1px;
   width: 194px;
   text-align: center;

}

html

<ul>
   <li><a href="#">Home</a></li>
   <li>
      <a href="#">About</a>
      <ul>
         <li><a href="#">About Me</a>
         <li><a href="#">About Site</a>
      </ul>
   </li>
   <li><a href="#">Contact</a></li>
</ul>