DEMO

Question

我正在制作导航菜单。我的下拉子菜单有问题。当我将鼠标悬停在子菜单上时，它会水平显示条目，但我想要垂直显示。有人可以告诉我我能做些什么来修复它吗？感谢。

这里是fiddle。

这是我的CSS代码：

#nav                            {overflow:hidden;
                                 margin:0px auto;
                                 text-align:center;}

#nav ul li                      {display:inline-block;
                                 list-style:none;
                                 vertical-align:top;
                                 width:100px;}

#nav>ul>li>a>img                {text-align:center;
                                 width:100px;
                                 height:100px;}

#nav a                          {text-decoration:none !important;}

#nav a:hover                    {text-decoration:underline !important;}

#nav > ul > li > ul             {display:none;
                                 z-index:999;
                                 position:absolute;}

#nav li:hover ul                {display:block;}

.submenu li                     {border-bottom:solid 1px #333333;
                                 font-size:12px;}

.submenu img                    {display:inline;
                                 vertical-align:middle;
                                 width:25px;
                                 height:25px;
                                 float:left;
                                 margin:5%}

.submenu li:hover               {background-color:#CCC;}

这是我的HTML代码：

<div id="nav">
    <ul>
            <li>
            <a href="">
                <img src="images/placeholder.png">
                Home
            </a>
            </li>
            <li>
            <a href="">
                <img src="images/placeholder.png">
                Menu w/ Submenu
            </a>
      <ul class="submenu">
                <li>
                <a href="">
                <img src="images/placeholder.png">
                Submenu Item
                </a>
                </li>

                <li>
                <a href="">
                <img src="images/placeholder.png">
                Submenu Item
                </a>
                </li>

            </ul>
            </li>

            <li>
            <a href="">
                <img src="images/placeholder.png">
                Menu Item
            </a>
            </li>

            <li>
            <a href="">
                <img src="images/placeholder.png">
                Menu Item
            </a>
            </li>
    </ul>
</div>

Answer 1

最简单的方法是在子菜单中评论position:absolute;。

#nav > ul > li > ul {display:none;
            z-index:999;
            /* position:absolute;*/}

检查此操作：

http://jsfiddle.net/5Kjg4/

Answer 2

Here is the solution to you problem 您只需将display:block和float添加到子菜单li

Answer 3

这是

DEMO

你有css类#nav ul li，它使子菜单在视觉上对齐..

解决此问题的一种方法是使用!important property and ovveriding display property。

更好的解决方案是使用psuedo类

#nav ul li:not(.subItem)            {display:inline-block;
                                 list-style:none;
                                 vertical-align:top;
                                 width:100px;}
.subItem{
     display:block;

}

这种方式内联块不适用于subItems。

Answer 4

你可以把它添加到你的css

//如果你需要职位：绝对

#nav ul li ul li {
float: left; // float left for inner li
display: inline-block;
}

#nav ul li ul  {
    width: 100px; // set width for you'r ul
}

Answer 5

更改代码中的以下css，它应该可以正常工作。问题是您正在为所有ul li显示内联块。

看一下小提琴 DEMO

#nav  ul  li {
    display:inline-block;
    list-style:none;
    vertical-align:top;
    width:100px;
}

要

#nav > ul > li { display:inline-block; list-style:none; vertical-align:top; width:100px; }

CSS：当我需要垂直时，菜单下拉水平显示

5 个答案:

http://jsfiddle.net/5Kjg4/

DEMO