How to style submenu text?!

HTML & CSS
1

I can’t get padding on my submenu, I can’t get the text to vertical align to the middle for the life of me either. I figured if I could set a background and font color then why wouldn’t padding or valign work either?

The only thing I can think of is maybe there is something overriding it possibly? Not sure.

Here is the link: Hover over Polysonmogrpahy

http://www.designingyours.com/KMMED/

thanks guys

2

Since your <li>s are fixed 30px height, you could try and set line-height: 30px; for the <a>s inside. That’s for valign.

As for padding, the selector

#nav li, #nav a {
display: block;
height: 30px;
margin: 0px;
padding: 0px;
}

has more weight (it has an id selector) than the selector

.sub li a {
border-bottom: 1px solid white;
color: white;
font-family: Arial;
font-size: 10pt;
margin: 10px;
padding-left: 10px;
text-decoration: none;
vertical-align: middle;
width: 150px;
}

nullifying your padding.

You could change it to

#nav .sub li a {
border-bottom: 1px solid white;
color: white;
font-family: Arial;
font-size: 10pt;
margin: 10px;
padding-left: 10px;
text-decoration: none;
vertical-align: middle;
width: 150px;
}
3

Ah I see.

Yeah I’m not very keen on what takes precendence over what in CSS, that’s interesting though. I’m still a beginner!

If I remove the fixed height, couldn’t I use padding or margin to make the links taller?

Also are you saying v-align doesnt work with a fixed height? If so that’s pretty dumb.

Thanks for the help

4

I guess I could also change .sub to #sub so I wouldn’t have that problem with the padding too.

5

I gave you a fast solution.

Yes, you could use padding to make links taller.

vlign does work with fixed height.

You’re welcome :slight_smile:

6

Hi,
I would suggest that you remove the heights and any large line-heights on the sub li a, it causes to many problems when text needs to wrap. That can be from you needing a long string of text or the user increasing font-size.

I added the words “Wrapping Text” to the third sub li so you can see what the fixed height does. It’ better to use padding on the sub a like you mentioned.

If you look at This Example you will see how text will wrap nicely without heights and large line-heights on the sub li.
The padding is also what keeps the text looking vertically centered.

Also are you saying v-align doesnt work with a fixed height? If so that’s pretty dumb.
Vertical-align only applies to inline elements and tables, it has no effect on blocks/floats.

7

You could, but then, you’re probably making a mistake:

  • .sub, a class, it’s suppose to be used on more than one element. Like in “more than one submenu”. Which is normal.
  • #sub means that there is just one element having this ID on that page. Like in just one submenu. Which is unrealistic.
8

The only height I have set is

#nav li, #nav a{
display: block;
height: 30px;
padding: 0; margin: 0;
}

If I remove that height, my hovers don’t even work let alone the drop down.

9

The only height I have set is…

Yeah but that height you have set on #nav a is targeting all the anchors, it gets inherited by the sub li a.

You would need to reset those to auto so your height stays on the first level anchors.

#nav li li a { /*sub list anchors*/
height:auto;
padding: 6px 0; /*pad top and bottom for vertical spacing*/
line-height:normal;
}
10

Cool that worked.

One more thing, the drop down menu is suppose to slide back up, I had a working version of it using just text, but i didn’t know if it wasn’t working correctly because I’m using a sprite?

The JS is the drop.js file

11

the drop down menu is suppose to slide back up

Yes it is acting buggy, if you drag your cursor down the “y” in “Polysonmogrpahy” you can see the sub list trying to slide back up.

This may have something to do with you on applying the sub UL styles on hover. The hover should just be controlling the hide and show effects, not presenting the initial rules.


/* Make submenu not appear until hover is initiated */
.sub{margin-left: -9999em;}

/* This is how the submenu <ul> will be displayed */
#nav li:hover ul{
    display:block;
    position:absolute;
    background-color:#c01515;
    margin:0;
}