PDA

View Full Version : cant pad li:ul list items? (its not messy!!!)


jax23
10-30-2009, 04:43 PM
I thought I'd keep things simple and and just have a vertical dropdown menu where the sub items appear below (thus moving the rest of the menu down to accomodate while you hover over it.).

been looking for a simple tutorial but have got lost all moring in the ether without being any the wiser.

This is the code for my sub menu, nothing added to padding or margins or placement takes affect, is it something to do with relative possitioning? Do I need a new rule? as it wont even allow me to add a border in the hover rule (not that I want one but just trying to suss it out).

what else do I need to add to get some space at the top of the sublist?


li ul{
display: none;
}

li:hover ul{
display: inline;
position: relative;
text-indent: 4;
line-height: 13px;
}



thanks

domedia
10-30-2009, 07:49 PM
You're making an inline element, so that is going to affect how you can apply margin and padding. If you make it a block element instead, you'd have your normal options.

So aty least start with 'display: block;' for the submenu UL, then don;t forget to start styling al the LI's and A's inside there as well.

jax23
10-31-2009, 04:13 PM
My dropdown is now not hidden even though I specified none in the display of my li,ul. It also wont show the bullet I have added to the li,lu:hover state. Can you help with this or point me to a good tutorial? there are so many that do more complex things but end up confussing me. many thanks for your help so far. here's the code anyway



#wrapper #content #leftnav ul {
font-weight: 400;
margin: 0px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 76px;
display: block;
}
#wrapper #content #leftnav ul li {
list-style-type: none;
letter-spacing: 0em;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 0px;
display: block;
}
#wrapper #content #leftnav ul li a:hover {
color: #FFFF91;
font-weight: bold;
margin: 0px;
padding: 0px;
}


li ul{
display: none;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 0px;
list-style-type: circle;
}

li:hover ul{
display: block;
position: relative;
text-indent: 4;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 0px;
list-style-type: circle;
}

jax23
10-31-2009, 04:18 PM
sorry realised I needed a ul,li,ul,li style

jax23
10-31-2009, 04:45 PM
still cant get my sub menu to disappear and appear when rolled over, need a good simple tutorial, any ideas?

domedia
10-31-2009, 06:48 PM
There's a great approach called the Suckerfish Menu.
I'm not sure how much instructions comes with it as it assumes CSS knowledge. I know you know some thought, so you might give it a try.