html - CSS 垂直下拉菜单

Question

我这里有这个网站http://surfthecurve.ca/每个导航元素都有一个导航，有一个下拉菜单，菜单工作正常，我似乎无法让它垂直移动。

这是导航的CSS

.navigation{
    width:100%;
    background-color:#353636;
    font-size:18px;
    float:left;
}

.navigation ul {
    list-style-type: none;
    margin: 0 auto;
    width:825px;
}

.navigation li {
    float: left;
}


.navigation ul a {
    color: #ffffff;
    display: block;
    padding: 0 105px 0 0;
    text-decoration: none;
    width:100%;
    text-align:center;
    text-transform:uppercase;
}

和下拉菜单的 CSS

.submenu {
    display: none;
}

.submenu li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    padding: 5px 15px 5px 15px;
    margin-left: 1px;
    white-space: nowrap;
}

.navigation li:hover .submenu {
    display: block;
    position: absolute;
}

.navigation li:hover .submenu li {
    float: left;
    font-size: 13px;
}


ul li a:hover {
background: #353636;
}

li:hover a { 
    background: #353636; 
}

li:hover li a:hover {
    background: #353636;
}

.navigation ul li ul li a{
    padding-left:10px !important;
    padding-right:10px !important;
    padding-top:0px !important;
    padding-bottom:0px !important;
}

这是HTML

<div class="navigation">
<ul>

<li><a href="http://surfthecurve.ca/?page_id=9">tutoring</a>
<ul class="submenu">
<li><a href="#">Our Approach</a></li>
<li><a href="#">Pricing</a></li>
</ul>
</li>

<li><a href="http://surfthecurve.ca/?page_id=7">the cause</a>
<ul class="submenu">
<li><a href="#">How It Works</a></li>
<li><a href="#">How We Give</a></li>
<li><a href="#">Why We Give</a></li>
</ul>
</li>

<li><a href="http://surfthecurve.ca/?page_id=11">company</a>
<ul class="submenu">
<li><a href="#">About Us</a></li>
<li><a href="#">Let's Get In Touch</a></li>
</ul>
</li>

<li><a href="http://surfthecurve.ca/?page_id=13">get involved</a>
<ul class="submenu">
<li><a href="#">Students</a></li>
<li><a href="#">Work For Us</a></li>
</ul>
</li>

</ul>
</div><!--navigation-->

对于垂直显示的菜单，我该如何解决这个问题？

提前致谢

J

Answer 1

这应该很容易让它垂直显示:

.submenu li {
  clear: both;
}

您现在要做的是设置样式，因为各个 li 元素的大小不同(元素收缩包裹到文本的大小)。