html - How do I center a menu option under it's heading option in a drop down menu? -
my menu comes as:
menu item 1 | menu item 2 | menu item 3 ..........menu stuff | ....menu stuff | menu stuff
and on.
i want show:
menu item 1 | menu item 2 | menu item 3 menu stuff.....| menu stuff .. | menu stuff
how center under heading option? it's bit of mess, think of coding relates menu.
html
<ul id="menu"> <li>home</li> <li>about</li> <li>menu 1 <ul> <li>stuff</li> <li>more stuff</li> <li>and more</li> </ul></li> <li>things <ul> <li>more</li> <li>today</li> <li>ideas</li> </ul></li>
css
ul#menu { list-style: none; margin-top: -50px; text-align: right; margin-left: 420px; } ul#menu li { float: left; text-align: right; display: inline; } li { width: 110px; } ul#menu li a{ display: inline; background:white; text-decoration: none; } ul#menu li a:hover{ width:120px; color: black; background:white; } ul#menu li ul { display: none; } ul#menu li:hover ul { display: block; /* display dropdown */ } ul#menu li:hover ul li { background: white; display: block; text-align: center; padding: 5px; }
just add padding in ul because default of ul element add padding left
ul#menu li ul { display: none; padding:0; }
then add this
ul#menu li ul li { text-align-left; }
Comments
Post a Comment