垂直CSS下拉菜单

我在这里有这个网站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; 
}

CSS和这里是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-->

我将如何解决这个问题我的菜单是垂直的吗？

在先进的感谢，

来源

2012-09-21 user1269625

这应该很容易得到它的垂直显示：

.submenu li { 
    clear: both; 
}

你有什么现在要做的就是风格了，作为个人里元素是不同的大小（元素收缩包装为文本大小）。

来源

2012-09-21 15:22:40

它的工作原理，但如果你在surfthecurve.ca上采取行动，下拉不会集中在其标题下，我该如何去做呢？ – user1269625

我曾经见过一些技巧，但不能认为什么会是我的头顶“最佳”。最简单的事情，我想做的是设置'li'的宽度并居中文本。 –

由于它的工作原理是垂直显示菜单，您是否愿意将此答案标记为正确？ –

垂直CSS下拉菜单

回答

相关问题