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

Popular posts from this blog

c++ - QTextObjectInterface with Qml TextEdit (QQuickTextEdit) -

javascript - angular ng-required radio button not toggling required off in firefox 33, OK in chrome -

xcode - Swift Playground - Files are not readable -