css navigation menu not displaying as expected

Question

this menu displays how I want it to in live view on dreamweaver cs6.

when I view it in any browser it is not applying parts of the css and I can't understand why?

this is the html:

<div id="header" class="clear">

     <ul id="nav">
            <li<a href="#">REHABS</li></a>
            <li<a href="#">BUSES</li></a>
            <li<a href="#">TESTIMONIES</li></a>
            <li<a href="#"><img src="images/logo.png"/></li></a>
            <li<a href="#">SCHOOLS</li></a>
            <li<a href="#">EVENTS</li></a>
            <li<a href="#">FUNDING</li></a>
     </ul>

and the css:

#header {
height: 100px; padding: 20px 0 0 0; width: 960px; margin: 0 auto;

}

#header ul#nav {
list-style: none; margin: 30px auto;

}

#header ul#nav li {
    float: left; padding: 0 0 0 20px; margin: 0 15px 0 0;   
}

#header ul#nav a img {position:relative; bottom:35px; margin: 0 0 80px 0;}

    #header ul#nav li:first child { background:none; }

        #header ul#nav li a {
            font-size: 21px; color: #e9e9e9; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; text-decoration: none; font-weight: bold;
        }

            #header ul#nav li a:hover, #header ul#nav1 li a.active {
                color: #4eb1ba;
            }

any help would be greatly appreciated :)

Web development 101: Never use Dreamweaver to preview your documents, or use the WYSIWYG editor (hopefully you aren't). That said, look at your HTML structure. Your LI's are not coded properly, each one is missing a > — Michael
– Michael, Commented Apr 24, 2013 at 15:40
On top of the answers below, I've just noticed that you've got a.active (a classname) and not a:active (a pseudo class) in your last block of css. You'll need the pseudo class. — user527892
– user527892, Commented Apr 24, 2013 at 16:08

Adrift · Accepted Answer · 2013-04-24 15:45:44Z

1

You're not closing your opening <li> and your nesting is invalid (you closed your </a> after the closing </li> when it should be the other way around - try changing to:

<div id="header" class="clear">

 <ul id="nav">
        <li><a href="#">REHABS</a></li> <!-- You had <li instead -->
        <li><a href="#">BUSES</a></li>
        <li><a href="#">TESTIMONIES</a></li>
        <li><a href="#"><img src="images/logo.png"/></a></li>
        <li><a href="#">SCHOOLS</a></li>
        <li><a href="#">EVENTS</a></li>
        <li><a href="#">FUNDING</a></li>
 </ul>

Your CSS looks fine so I'm assuming this is your problem.

edited Apr 24, 2013 at 15:45

answered Apr 24, 2013 at 15:37

Adrift

60k12 gold badges98 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user527892 Over a year ago

No worries, could've edited it myself I suppose but when your rep > my rep it just wouldn't have felt right :-)

ricky Over a year ago

thanks guys, what an idiot lol!! I got the code from a working example and thought the Li not closing was a bit strange!

Jag · Accepted Answer · 2013-04-24 15:46:47Z

1

Also you should have you anchors within the li tag

<li><a href="#">TESTIMONIES</a></li>

answered Apr 24, 2013 at 15:46

Jag

1035 bronze badges

Collectives™ on Stack Overflow

css navigation menu not displaying as expected

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related