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-->

如果我的菜单垂直移动，我该如何解决？

先谢谢了，

Ĵ

Answer 1

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

.submenu li {
  clear: both;
}

你现在要做的就是设置样式，因为单个li元素的大小不同（元素缩小包装到文本的大小）。

CSS垂直下拉菜单

1 个答案: