Question

I have my navigation menu working perfectly. But when I apply the selected class to any of my items in the navigation list other than the ‘Home’ link, it pushes my navigation menu into two lines. I’ve tried everything but can’t seem to figure the problem out.

Also this only happens in Chrome. I tried it on Firefox on Windows and Mac and it worked perfectly.

I tried adding a slash to the end of About and that seemed to push the ‘About’ word out but keep the slash still on the second line.

Can anyone please help? I can’t seem to figure this out.

A picture of what I’m talking about:

Here is my menu code with the home selected:

<div id="navigation"> <!-- Start navigation -->
                    <ul>
                        <li><a class="selected" href="index.html">Home \</a></li>
                        <li><a href="#">Shop <span>\</span></a></li>
                        <li><a href="collection.html">Collection <span>\</span></a></li>
                        <li><a href="#">Press <span>\</span></a></li>
                        <li><a href="#">Video <span>\</span></a></li>
                        <li><a href="about.html">About</a></li>
                    </ul>

And here is the code with the About link selected:

<div id="navigation"> <!-- Start navigation -->
                    <ul>
                        <li><a href="index.html">Home <span>\</span></a></li>
                        <li><a href="#">Shop <span>\</span></a></li>
                        <li><a href="collection.html">Collection <span>\</span></a></li>
                        <li><a href="#">Press <span>\</span></a></li>
                        <li><a href="#">Video <span>\</span></a></li>
                        <li><a class="selected" href="about.html">About</a></li>
                    </ul>
                </div> <!-- End navigation -->

And the CSS:

#navigation { clear: both; float: right; margin-top: 30px; }
#navigation ul li { display: inline; margin-right: 10px; }
#navigation ul li a { font-family: "Lucida Console"; font-size: 19px; color: #B3B3B3; text-decoration: none; text-transform: uppercase; }
#navigation ul li a span { font-size: 12px; vertical-align: middle; }
#navigation ul li a.selected { color: #6a6a6a; }

Answer 1

I think there is a class being applied for .selected that you are missing. The about link looks larger to me. Have you inspected in Firebug?