jQuery Multi Level CSS Menu #2

[vikki3]

1) jQuery Multi Level CSS Menu #2

2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...el_css_menu_2/

3) Describe problem: I wonder if someone could help me. I am new to this and have created a website www.thompsonborrell.co.uk. I have used the menu at the top of the page but the drop down part does not line up with the text. I have tried changing a few things but can not get it to line up.

Thanks in advance

Vikki

[Paulod]

1) jQuery Multi Level CSS Menu #2

2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...el_css_menu_2/

3) Describe problem: I wonder if someone could help me. I am new to this and have created a website www.thompsonborrell.co.uk. I have used the menu at the top of the page but the drop down part does not line up with the text. I have tried changing a few things but can not get it to line up.

Thanks in advance

Vikki

Hi Vikki, try replacing the rule on line 69 of jqueryslidemenu.css with this:

.jqueryslidemenu ul li ul li a {
font: normal 11px Verdana;
width: 100px;
padding: 0px;
margin: 0;
border-top-width: 0;
border-bottom: 0px solid gray;
}

I just turned off the padding.

[vikki3]

Hi Vikki, try replacing the rule on line 69 of jqueryslidemenu.css with this:

.jqueryslidemenu ul li ul li a {
font: normal 11px Verdana;
width: 100px;
padding: 0px;
margin: 0;
border-top-width: 0;
border-bottom: 0px solid gray;
}

I just turned off the padding.

Thanks Paul, I'll give it a go.

[vikki3]

Hi Paul

The padding seams to be the space inbetween the submenu options and not to move it to the left hand side unfortunetely.

Vikki

[Paulod]

If you want to move the main links to the left, try this:

.jqueryslidemenu ul li a {
display: block;
background: #3C3436;
color: #cccccc;
padding: 7px 5px;
border-right: 9px solid #3C3436;
color: #cccccc;
text-decoration: none;
}

I changed the padding (left & right) from 2px to 5px to match the drop links.



If you want to change just the padding on the sides of the drop links, without affecting the padding between the drop links, try this:

.jqueryslidemenu ul li ul li a {
font: normal 11px Verdana;
width: 100px;
padding: 5px 12px;
margin: 0;
border-top-width: 0;
border-bottom: 0px solid gray;
}


A single value will affect all 4 sides,

and if there's just two, the first padding value changes the top and bottom and the second affects the left and right.

And if you want to get more detailed, you can specify them individually:

http://css-tricks.com/remember-the-o...-with-trouble/



Sometimes a rule is being over-ruled elsewhere (you can check which values are declared and which actually get computed. Check out Developer Tools in your browser). You can also turn rules on and off here without making permanent changes.

[vikki3]

If you want to move the main links to the left, try this:

.jqueryslidemenu ul li a {
display: block;
background: #3C3436;
color: #cccccc;
padding: 7px 5px;
border-right: 9px solid #3C3436;
color: #cccccc;
text-decoration: none;
}

I changed the padding (left & right) from 2px to 5px to match the drop links.



If you want to change just the padding on the sides of the drop links, without affecting the padding between the drop links, try this:

.jqueryslidemenu ul li ul li a {
font: normal 11px Verdana;
width: 100px;
padding: 5px 12px;
margin: 0;
border-top-width: 0;
border-bottom: 0px solid gray;
}


A single value will affect all 4 sides,

and if there's just two, the first padding value changes the top and bottom and the second affects the left and right.

And if you want to get more detailed, you can specify them individually:

http://css-tricks.com/remember-the-o...-with-trouble/



Sometimes a rule is being over-ruled elsewhere (you can check which values are declared and which actually get computed. Check out Developer Tools in your browser). You can also turn rules on and off here without making permanent changes.

Thanks Paul. All sorted now, I am well pleased.