PDA

View Full Version : Need help editing drop down menu



revtim
08-07-2012, 07:01 AM
1) Script Title: jQuery Multi Level CSS Menu #2

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

3) Describe problem: I have installed this menu ok but can't get it to center within the nav bar. Also, I can't figure out how to extend the width of each item so I can make the name of the menu items longer.

I have tried everything I can think of and just can't seem to get it done. Any help would be greatly appreciated.
Thanks

GSimon
08-07-2012, 07:33 AM
To "extend the width of each item so I can make the name of the menu items longer" you need to modify the code in the css file (jqueryslidemenu.css) and add in the following:



/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
width:200px;
display: inline;
float: left;
}

And change 200px to your desired width.

To "get it to center within the nav bar" you need to edit the same css file and change 'margin:0' to this:



.jqueryslidemenu ul{
margin-left:auto;
margin-right:auto;
padding: 0;
list-style-type: none;
}


Changing margin-left and margin-right to auto should center everything. However if it doesn't you may need to add this to your code also, but I would suggest only adding this if the above didn't work.



.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
text-align:center;
}

revtim
08-07-2012, 11:14 PM
The centering suggestions didn't work. I had tried them previously. Of note however, when I posted them where you suggested, the result was that the menu then was aligned to the right instead.

Good news however the width edit worked fine so thanks for that. Now one last problem I noticed. When I edit in my Expressions Web program the menu looks fine but when I preview in browser, there is about 10px worth of space above the menu to the top of the div. I suppose I can fix by changing the color of the background of the div but I'd rather have it work as it should.
PS: This project is done using a Dynamic Website Template .dwt and I added the code there as the menu is part of the template. not sure if this makes any difference to how it should work. I would also tell you that the navbar style css applied has no padding or margins and has text centered.

Thanks for your help thus far.