水平 100% 菜单但垂直子菜单项答案

【问题标题】：Horizontal 100% menu but vertical submenu items水平 100% 菜单但垂直子菜单项
【发布时间】：2013-09-27 08:40:15
【问题描述】：

我制作了一个水平菜单，所有菜单项都占导航的 100%。为此，我在“lu”中使用 display:table，在“li”中使用 display:table-cell。通过这种方式，菜单是水平的，并将所有菜单项扩展到 100% 宽度。问题是子菜单也是水平的，但我想要垂直的子菜单项。

    <script type="text/javascript">
        $('body').ready(function() {
           $('.dropdown').hover(function() {
              $(this).find('.sub_navigation').slideToggle(); 
           });
        });
    </script>

    ul#navigation {
        float:left;
        display:table;
        margin:0;
        padding:0;
        width:100%;
        font-size:15px;
        background-color:#FFF;
    }

    ul#navigation li {
        display: table-cell;
        margin:0;
        padding:14px 3px 14px 3px;
        text-align:center;
    }

    ul.sub_navigation {
        position:absolute;
        display:none;
        margin:0;
        padding:0;
        background-color:#FFF;
        opacity:0.8;
        list-style-type:none;
    }

    ul.sub_navigation li {
        clear:both;
    }

    ul#navigation li a,
    ul#navigation li a:active,
    ul#navigation li a:visited {
        color:#000000;
        text-decoration:none;
        display:block;
    }
    ul#navigation li a:hover {
        color:#478961;
    }



    <ul id="navigation">
        <li class="dropdown">
            <a href="">Item 1</a>
            <ul class="sub_navigation">
               <li><a href="">Sub item 1</a></li>
               <li><a href="">Sub item 2</a></li>
            </ul>
        </li>
        <li><a href="">Item 2</a></li>
    </ul>

我可以添加什么到 sub_navigation 样式以垂直显示 subenu 项目？

谢谢维克多

【问题讨论】：

用一些代码制作一个 jsfiddle

标签： html css menu

【解决方案1】：

由于元素设置为clear:both，只需将float:left添加到子导航中的li元素即可。

ul.sub_navigation li {
    float:left;
    clear:both;
}

【讨论】：

【解决方案2】：

如果你想要的话，可以不使用浮点数：

    ul.sub_navigation li a {
        display: inline-block;
    }

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

【讨论】：