How To Center A CSS Drop Down Menu
replace this css with what you have for #cssmenu > ul > li:
#cssmenu > ul > li {
display:inline-block;
margin-left: 15px; /* This is when the drop down box appears */
position: relative;
}
and add this to your css codes:
#cssmenu > ul {
text-align:center;
}
here it is: http://jsfiddle.net/y4vDC/10/
You need your li
elements to be inline
, and then use text-align
on the parent element to center them:
#cssmenu ul {
text-align:center;
}
#cssmenu ul li {
display: inline;
}
In order that they stay as inline
, you need to delete the float from the list elements.
http://jsfiddle.net/y4vDC/13/