Welcome to WebmasterWorld Guest from 34.203.28.212

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Menu Header Styles

Can't get CSS Menu header to use styles

     
3:28 pm on Oct 6, 2008 (gmt 0)

New User

10+ Year Member

joined:Apr 2, 2008
posts: 17
votes: 0


Hello,
Thanks to your help, I have my Horizontal CSS Drop Down menu functioning correctly. I am very new to CSS, and my problem now is that I can't get the Headers of the menu to use the styles I want. I am trying to use a separate larger font and a transparent background and no borders (I have a background image in the table I want to show through). I have tried a bunch of things, but due to my inexperience, nothing has worked for me. I would really apprecite any help you could provide. Relevnt part of my css is as follows:
----------------------------------------------------------
#menu {
width: 100%;
background: #fff;
float: left;
}

#menu ul {
list-style: none;
float: left;
margin: 0;
padding: 0;
width: 12em;
}

#menu a {
display: block;
padding: 2px 3px;
overflow: hidden;
}

#menu h2 {
color: #fff;
background: transparent;
font-size: 16px;
font-weight: bold;
}

#menu a:link, #menu a:visited, #menu a:active/* menu at rest */
{
color: white;
background-color: royalblue;
text-decoration:none;
font-size: 12px;
font-weight: normal;
font-family: calibri, arial;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
}

#menu a:hover/* menu at mouse-over */
{
color: white;
background-color: cornflowerblue;
text-decoration:none;
}

#menu a.parent, #menu a.parent:hover /* attaches side-arrow to all parents */
{
background-image: url(nav_white.gif);
background-position: right center;
background-repeat: no-repeat;
}
--------------------------------------------------

....the rest is for positioning, etc.

Thank you so much!

4:29 pm on Oct 6, 2008 (gmt 0)

Full Member

10+ Year Member

joined:July 27, 2005
posts:329
votes: 0


If your
h2
is also a link, the
#menu a
is probably overwriting the former specified CSS. I sometimes add
!important
to make sure a certain style is applied, though this is not always good practice and one can overcome this by making use of "specificity". Could you post your corresponding html, which will makes things easier for troubleshooting purposes.
4:58 pm on Oct 6, 2008 (gmt 0)

New User

10+ Year Member

joined:Apr 2, 2008
posts:17
votes: 0


Thank you SilverLining :)
Yes, sorry I did mean to mention it is a link. Since I do not know CSS very well at all, I am not sure how to specify that this should be different. HTML is as follows:

-----------------------------------------

<div id="menuhcontainer">
<div id="menu">
<ul>
<li><a href="#"><h2>Ventilation</h2></a>
<ul>
<li><a title="#" href="#" class="parent">Bathroom Fans</a>
<ul>
<li><a title="#" href="#" class="child">Ceiling Mounted</a></li>
<li><a title="#" href="#" class="child">Fans with Lights</a></li>
<li><a title="#" href="#" class="child">Fans with Heaters</a></li>
<li><a title="#" href="#" class="child">Decorative Fans</a></li>
</ul>
</li>
<li><a title="#" href="#" class="parent">Range Hoods</a>
<ul>
<li><a title="#" href="#" class="child">Wall Chimney Range Hoods</a></li>
<li><a title="#" href="#" class="child">Island Range Hoods</a></li>
<li><a title="#" href="#" class="child">Under Cabinet Range Hoods</a></li>
</ul>
</li>
<li><a title="#" href="#" class="parent">Whole House Fans</a></li>
<li><a title="#" href="#" class="parent">Dryer Booster Fans</a></li>
<li><a title="#" href="#" class="parent">Utility Fans</a>
<ul>
<li><a title="#" href="#" class="child">Wall Mounted Utility Fans</a></li>
<li><a title="#" href="#" class="child">Inline Utility Fans</a></li>
<li><a title="#" href="#" class="child">Utility Fans Accessories</a></li>
</ul>
</li>
</ul></li>
</ul>
<ul>
<li><a title="#" href="#"><h2>Fans</h2></a>
<ul>
<li><a title="#" href="#" class="parent">Bathroom Fans</a>
<ul>
<li><a title="#" href="#" class="child">Ceiling Mounted</a></li>
<li><a title="#" href="#" class="child">Fans with Lights</a></li>
<li><a title="#" href="#" class="child">Fans with Heaters</a></li>
</ul>
</li>
<li><a title="#" href="#" class="parent">Ceiling Fans</a></li>
<li><a title="#" href="#" class="parent">Floor Fans</a></li>
<li><a title="#" href="#" class="parent">Table Fans</a></li>
</ul>
</li>
</ul>
<ul>
<li><a title="#" href="#"><h2>Air Purifiers</h2></a></li>
</ul>
</div><!-- end the menuh-container div -->
</div><!-- end the menuh div -->

------------------------------------------------------------
Thanks again!

5:45 pm on Oct 6, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


you shouldn't ever need !important (it has previously been (ab)used as an IE hack, but is now fixed, and also it's abuse by an author, that !important rule is meant for accessibility, or GUI's where the user's control is being limited, it should not be necessary in a normal website's CSS),

Specificity will, or should, always take care of it if the HTML is structured semantically, which is why this particular menu was coded with the top level (header) items wrapped in h2's - I know the code author really well ;)

however Fiona,

<li><a href="#"><h2>Ventilation</h2></a>

is incorrect nesting of HTML elements (the HTML validator [validator.w3.org] is a useful tool for picking up nesting errors) an inline element <a> cannot contain a block element <h2>, so the HTML should like this:

<li><h2><a href="#">Ventilation</a></h2>

then the css for the normal links would be:

#menu a {yourstyles}

and to specifically pick out or target the links in the header

#menu h2 a {header link style overrides}

the first rule will also target the links that are inside the <h2> element as they are still descendants of the #menu div.. the second will only target the header links as none of the other #menu links have an h2 element in their ancestry so it should be used for any overrules required

6:06 pm on Oct 6, 2008 (gmt 0)

New User

10+ Year Member

joined:Apr 2, 2008
posts:17
votes: 0


Thank you so much SuzyUK :)
7:27 pm on Oct 6, 2008 (gmt 0)

New User

10+ Year Member

joined:Apr 2, 2008
posts:17
votes: 0


OK, that did fix the style problem, and everything works great in IE, but in FF the menu is getting hidden behind the content that appears below it on the page.
8:28 pm on Oct 6, 2008 (gmt 0)

New User

10+ Year Member

joined:Apr 2, 2008
posts:17
votes: 0


I fixed that by changing

#menu li:hover {position: relative;}

to

#menu li:hover {z-index:100;}

but now the width I had set for the drop downs changed and it looks terrible. I have each main header of the menu set at different widths based on what is contained (i.e.<ul style="width: 16%"> and <ul style="width: 25%">). I then had the width of the dropdown set to 100% of this as follows:

#menu ul {
list-style: none;
float: left;
margin: 0;
padding: 0;
width: 100%;
}

Now to contain it on the page I had to change it back to

#menu ul {
list-style: none;
float: left;
margin: 0;
padding: 0;
width: 15em;
}

wherein the dropdowns do not match the header of the menu.

Would it be best to go back to "position:relative" and find another solution for problem in FF (menu hidden behine content) or should I try and find a method to set each drop-down width individually to match?

Thanks for your help :) You guys save me all the time now :)

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members