1

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

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

希望有人能帮助我。谢谢你。

4

4 回答 4

4

问题是容器宽度定义为 300px

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

它的子元素占据了 100% 的空间。因此，您需要确保它们有向左浮动的空间。

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

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

小提琴

于 2013-07-25T18:13:25.310 回答
3

检查这个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;
}
于 2013-07-25T19:00:19.623 回答
0

我建议使用 jQuery。它有一个名为 slideDown() 的简单函数。 这是一个很好的教程的链接。

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

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

以及当鼠标进入按钮时下拉菜单并在离开时向上滑动的命令：

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

您可以使用任何 CSS 选择器来代替使用 ID。

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

于 2013-07-25T18:16:03.243 回答
0

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>
于 2017-10-24T05:04:01.437 回答