Question

I have this site here http://surfthecurve.ca/ and I have a navigation for each nav item there is a drop down menu, the menu works fine, I just cant seem to get it to go vertically.

Here is the CSS for the navigation

.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;
}

and the CSS for the drop-down

.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;
}

and here is the 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-->

How would I fix this for my menu goes vertically?

Thanks in advanced,

J

Answer 1

This should be easy enough to get it to display vertically:

.submenu li {
  clear: both;
}

What you have to do now is style it, as the individual li elements are different sizes (the element shrink wraps to the size of the text).