I've made an horizontal menu that all menu items take 100% of the nav. To do this, I use display:table in 'lu', and display:table-cell in 'li'. In this way the menu is horizontal and extends all manu items to 100% width. The problem is the submenu is also horizontally but I want the submenu items vertically.
<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>
What can I add to sub_navigation styles to show subenu items vertically?
Thanks Victor