jQuery Multi Level CSS Menu
I have been struggling with customizing the jQuery CSS menu since yesterday. I have successfully changed to white text with black background, removed tab images and borders as opposing to the one looked here. What I wanted the customized jQuery CSS menu to be text-aligned to center and have the sub menus display right under its top menu instead of under left of the top menu bar.
I'm guessing it has something to do with position:absolute and position:relative and margins that I could not figure out which rule to apply. I have also tried adding width:100% and text-align:center under few of rules and did not succeed the way I wanted it to be. Here's the link to see that I'm having trouble with.
jQuery CSS Menu: www.gvrrid.org/GVRpreview/css/jquerycssmenu.css
Main CSS: www.gvrrid.org/GVRpreview/css/style.css
Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.
The problem with centering the top menu items with this menu stem from the fact that the menu uses CSS's
float:left property to archive its look, which makes it difficult to center things. Theoretically the solution is to modify the menu to no longer use this property while still looking the way you want it to, though it takes time and a lot of testing to get it just right this way.
Another easier solution is to simulate centering by offsetting the first top menu item to the right by x pixels, making it appear as if the menu items are closer to the center. For an example of this, I've attached a modified version of the .css file you can try (change the 300px value inside it depending on how much to the right you wish the menu items to be offset by).