Html 水平100%菜单项，但垂直子菜单项

我制作了一个水平菜单，所有菜单项占据100%的导航。为此，我在'lu'中使用display:table，在'li'中使用display:table单元格。这样，菜单是水平的，并将所有手动项目扩展到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>

$（'body'）.ready（函数（）{
$（'.dropdown'）.hover（函数（）{
$（this）.find（'.sub_导航'）.slideToggle（）；
});
});
ul#导航{
浮动：左；
显示：表格；
保证金：0；
填充：0；
宽度：100%；
字体大小：15px；
背景色：#FFF；
}
ul#导航李{
显示：表格单元格；
保证金：0；
填充：14px 3px 14px 3px；
文本对齐：居中；
}
ul.sub_导航{
位置：绝对位置；
显示：无；
保证金：0；
填充：0；
背景色：#FFF；
不透明度：0.8；
列表样式类型：无；
}
ul.sub_导航李{
明确：两者皆有；
}
ul#导航李a，
ul#导航李a：主动，
ul#导航李a：访问{
颜色：#000000；
文字装饰：无；
显示：块；
}
ul#导航李a：悬停{
颜色：#478961；
}

我可以向子菜单导航样式中添加什么以垂直显示子菜单项

谢谢

---

Victor

由于元素设置为

清除：两个

，只需将

浮动：左

添加到子导航中的li元素

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

---

由于元素设置为

clear:both

，只需将

float:left

添加到子导航中的li元素即可

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

---

如果您希望这样做，则不使用浮动：

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

---

如果您需要浮动，则不使用浮动：

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

---

使用一些代码创建JSFIDLE使用一些代码创建JSFIDLE