Question

我正在尝试制作一个带有四列子菜单的导航栏。我编写了大部分内容，但是当我创建子菜单时，我发现了问题。

这是我的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%;
}

希望这对您的问题有所帮助。

Fiddle

Answer 2

检查http://jsfiddle.net/qtvVK/11/embedded/result/。

我对您的标记进行了一些更改，并使用了display:inline-block;而不是浮动元素

相关的CSS syles

/* 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

我建议使用jQuery。它有一个简单的函数叫做slideDown（）。 Here是指向优秀教程的链接。

你应该这样做：首先在脚本启动时隐藏你的菜单：

$("#idOfDropDownMenu").hide();

命令在鼠标进入按钮时将菜单放下并在离开时向上滑动：

$("#idOfButton").hover(function(){      //function that fires when mouse enters
    $("#idOfDropDownMenu").slideDown();
}, function() {                         //function that fires when mouse leaves
    $("#idOfDropDownMenu").slideUp();
}

您可以使用任何CSS选择器，而不是使用ID。

我希望这对您的问题有所帮助。

Answer 4

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>

使用CSS和HTML创建下拉菜单

4 个答案: