fmz 14

I have a navigation bar that is 90% there but the contact us drops into the content below. You can see the page here.

Here is the html:

<ul id="nav-one" class="dropmenu"> 
        <a href="#">about us</a> 
            <li><a href="#">Support</a></li> 
            <li><a href="#">Help</a></li> 
            <li><a href="#">Examples</a></li>
            <li><a href="#">Your work</a></li>
        <a href="#">the collection</a> 
            <li><a href="#">shrubs</a></li> 
            <li><a href="#">trees</a></li> 
            <li><a href="#">grasses</a></li>
            <li><a href="#">groundcovers</a></li>
            <li><a href="#">fall bulbs</a></li>
    <li><a href="#">find your zone</a></li>  
    <li><a href="#">in the garden</a></li>
    <li><a href="#">where to buy</a></li>
    <li><a href="#">contact us</a></li>         

Here is the CSS:

ul.dropmenu {
    width: 730px;
    position: relative;
    top: 65px;
    left: 230px;
    margin: 0px; 
    padding: 0px;
    background-color: #80a4b6;
    z-index: 1000; 
    list-style-image: none; 
    list-style-type: none; }

.dropmenu li a, .dropmenu li div{
    padding: 9px 15px 8px;
    text-decoration: none;
    color: #FFF;

Ideally I would like the navigation to spread out evenly across the full width of the navigation bar.


1 answer

danwellman 5600
This was chosen as the best answer

Ok, what I would do is this:

Change the <a> within the <h1> so that it is not positioned absolutely and float the <h1> left.

Float the dropmenu left, set its top property to 41px and remove the left style property.

Only float the <li> elements in the dropmenu left, not the <a> elements within the <li> elements

Change the padding of the <a> elements in the drop menu to 6px 20px.

This should then give you the appearance/layout you require :)

Answered about 8 years ago by danwellman
  • Hey Dan. Thank you very much for the help. I really appreciate it. fmz about 8 years ago
  • np :) danwellman about 8 years ago