CSS li element to single li in menu

ianhaney · 03-17-2013, 12:44 AM

Hi

I got the following html ul li list

Code:

<ul id='menu'>
<li><a href='index.php'>HOME</a></li>
<li><a href='about_us.php'>ABOUT US</a></li>
<li><a href='#'>NEWBORN</a></li>
<li><a href='#'>0-1 YEAR</a></li>
<li><a href='#'>3-5 YEARS</a></li>
<li><a href='#'>6-10 YEARS</a></li>
<li><a href='#'>AWARDS & PRESS</a></li>
<li><a href='contact_us.php'>CONTACT US</a></li>
</ul>

The css is below

Code:

/*DROPDOWN FUNCTIONALITY*/
/*set up ul tags*/ 
#menu {
width: 800px;
margin-left: 45px;
margin-top: -4.3%;
color: #c28383;
background-color: #fffdf3;
font-size: 12px;
}

#menu ul{ padding:0; margin: 0;}
/*set up a tags*/ 
#menu a{display:block; color: #c28383; border: 1px #c28383 solid; height: 25px;}
/*position level 1 links horizontally*/ 
#menu li{display:block; float:left; width: 100px; text-align: center;}
/*undo previous style for level 2 links*/
#menu li ul li{float:none; margin-left: 0.5px;}
/*position level 2 links vertically and hide*/ 
#menu li ul{display:none; position:absolute; z-index:1}
/*unhide level 2 links on li:hover from level 1*/ 
#menu li:hover ul{display:block;}

/*DROPDOWN STYLING:*/
#menu{height:25px;}
#menu a{color:#c28383; padding:18px 10px 5px 10px; text-decoration: none;}
#menu a:hover{color:#c28383;}
#menu li{background-color:#fffdf3; border-bottom:solid 0px #CCC;  margin-left:-1px;}
#menu li:hover{background-color:#F0F0F0;}

I am struggling to add a class to one of the li elements

I thought it would be the following

Code:

<li class='awards'><a href='#'>AWARDS & PRESS</a></li>

and the CSS for it below

Code:

#menu li.awards {
margin-top: -4%;
}

But all that does is move the whole box and all I want is to just move the text inside the box

Please help as is doing my head in with it

Excavator · 03-17-2013, 01:12 AM

Hello ianhaney,
Plenty of things to look at here...

Since the text inside the li is enclosed in the anchor, maybe this would work better (you probably don't really want margin to fix this, and definitely not negative margin...
padding: 10px 0 13px; instead?) -

Code:

#menu li.awards a {
margin-top: -4%;
}

See specificity here.
..

In your CSS you style a ul contained in #menu with this bit -

Code:

#menu ul {
	padding: 0;
	margin: 0;
}

You probably meant for that to be ul#menu instead.

...

You set ul#menu to a height of 25px but the li's it contains are 50px high.
Is that why you feel you need the negative margins?
See the box model rule here.
I would suggest looking further up the page, see what started out the need for negative margins in the first place and try fixing that problem before it cascades all the way through your whole layout.

ianhaney · 03-17-2013, 10:03 AM

Hi Excavator

I did the following as you said and worked perfect

Code:

#menu li.awards a

and

Code:

padding: 10px 0 13px

Thank you so much really appreciate it

Kind regards

Ian