Need help modifying css menu to suit

HTML & CSS
1

Hi there everyone!

I’m trying to set up a css hover-over menu that I found in an online tutorial to suit my needs but am having an issue getting certain things to change and was wondering if I could ask for some assistance.

First off, here’s my test page: http://www.aircooledaddiction.com/menu.html

And here’s the implementation in the forum: http://www.aircooledaddiction.com/forum

My questions:

  1. What do I need to do to get the non-hover text to be white on the main bar in the forum like it is on menu.html?

  2. How would I get the bar to span the width of the content on the page(like the orange header bar below it)?

  3. Once I manage to get it to spread the content, How would I orientate the links to be on the left and not centered? I would want just blank orange from the last link to the rounded end on the right and then I’d add additional links as needed.

Thanks for your time!

2

#1 you probably have some specificity conflict with some other rule in your stylesheet (or other stylesheets). There is really a LOT of stuff it could be and it would be optimal for you to inspect your code for rules which have more specificity than: nav ul li a. Quick fix would be to add and ID or class to your markup.
<nav id=‘mainNav’>
then use nav#mainNav ul li a{…}

you could still run into conflict, which may mean you may need to add another ID

<nav id=‘mainNav’> <ul class=‘mainNavList’>
then use nav#mainNav .mainNavList li a {…}

as far as #2 and #3 adding nav > ul { width:100%; } should do it. REMEMBER specificity above as this rule will make all ULs that are direct children of NAVs the same width the parent NAV element.

hope that helps

3

Thanks very much for your help!

I added and ID as suggested and it did resolve the font color. I’m having an issue following through with your instructions for the final two issues, however.

I will post the code I’m using so you don’t have to dig through the page.

URL: http://aircooledaddiction.com/forum

CSS:

/* Nav Bar
 ----------------*/

nav#topNav {
    margin: 10px auto; 
    text-align: center;
}

nav#topNav ul ul {
    display: none;
}

    nav#topNav ul li:hover > ul {
        display: block;
    }


nav#topNav ul {
    background: #fe9b00; 
    background: linear-gradient(top, #fe9b00 0%, #bf7500 100%);  
    background: -moz-linear-gradient(top, #fe9b00 0%, #bf7500 100%); 
    background: -webkit-linear-gradient(top, #fe9b00 0%,#bf7500 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0 20px;
    border-radius: 10px;  
    list-style: none;
    position: relative;
    display: inline-table;
    width:100%;
}
    nav#topNav ul:after {
        content: ""; clear: both; display: block;
    }

    nav#topNav ul li {
        float: left;
    }
        nav#topNav ul li:hover {
            background: #4b545f;
            background: linear-gradient(top, #ffffff 0%, #ffbd56 40%);
            background: -moz-linear-gradient(top, #ffffff 0%, #ffbd56 40%);
            background: -webkit-linear-gradient(top, #ffffff 0%,#ffbd56 40%);
        }
            nav ul li:hover a {
                color: #757575;
            }
        
        nav#topNav ul li a {
            display: block; padding: 6px 12px;
            color: #ffffff; text-decoration: none; font-weight: bold;
        }
            
        
    nav#topNav ul ul {
        background: #fe9b00; border-radius: 0px; padding: 0;
        position: absolute; top: 100%;
    }
        nav#topNav ul ul li {
            float: none; 
            border-top: 1px solid #ae6a00;
            border-bottom: 1px solid #ae6a00; position: relative;
        }
            nav#topNav ul ul li a {
                padding: 6px 12px;
                color: #fff;
            }    
                nav#topNav ul ul li a:hover {
                    background: #ffcd7e;
                }
        
    nav#topNav ul ul ul {
        position: absolute; left: 100%; top:0;
    }

HTML:

<nav id="topNav">
	<ul>
		<li><a href="[/index.php](http://www.sitepoint.com/forums/view-source:http://www.aircooledaddiction.com/index.php)">Home</a></li>
		<li><a href="[/forum](http://www.sitepoint.com/forums/view-source:http://www.aircooledaddiction.com/forum)">Forum</a>
			
			<ul>
				<li><a href="[./search.php">Search</a></li><li><a href="[URL="http://www.sitepoint.com/forums/view-source:http://www.aircooledaddiction.com/forum/memberlist.php"]./memberlist.php">Members</a></li><li><a href="[URL="http://www.sitepoint.com/forums/view-source:http://www.aircooledaddiction.com/forum/ucp.php"]./ucp.php](http://www.sitepoint.com/forums/view-source:http://www.aircooledaddiction.com/forum/search.php)">User Control Panel</a></li>
			</ul>
			
		</li>
	</ul>
</nav><nav id="topNav">
	<ul>
		<li><a href="[/index.php](http://www.sitepoint.com/forums/view-source:http://www.aircooledaddiction.com/index.php)">Home</a></li>
		<li><a href="[/forum](http://www.sitepoint.com/forums/view-source:http://www.aircooledaddiction.com/forum)">Forum</a>
			
			<ul>
				<li><a href="[./search.php">Search</a></li><li><a href="[URL="http://www.sitepoint.com/forums/view-source:http://www.aircooledaddiction.com/forum/memberlist.php"]./memberlist.php">Members</a></li><li><a href="[URL="http://www.sitepoint.com/forums/view-source:http://www.aircooledaddiction.com/forum/ucp.php"]./ucp.php](http://www.sitepoint.com/forums/view-source:http://www.aircooledaddiction.com/forum/search.php)">User Control Panel</a></li>
			</ul>
			
		</li>
	</ul>
</nav>

My two issues are now:

  1. The 100% did widen the bar, but it’s shifted to the right of the rest of the page. It doesn’t sit inside the content box.

  2. I’m not sure how to add a second ID in addition to the first one to make the child boxes not span 100%.

Thank you again for all your help.

4

Hi,

If you want the orange bar to be full width then do this:


nav#topNav >  ul{
display:table;
width:100%;
padding:0;
margin:0;
text-align:center;
}

If you still want the menu items centred then add this code (or don’t add if left-aligned is ok):


nav#topNav ul li {
float:none;
display:inline-block;
vertical-align:middle;
*display;inline;/* ie7/6/ inline block hack */
*zoom:1.0;/* ie7/6/ hack */
}