Center DropDown Menu inside itself - html

Question

This is my scenario
(JsFiddle Link at the end of page)
I want to center the buttons "Home", "Categories", "Work", ecc ecc inside the same bar.
In other words, now is on left side; I want to center it.
<nav id="menu-wrap">
<ul id="menu">
<li>Home</li>
<li>
Categories
<ul>
<li>
CSS
<ul>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
</ul>
</li>
<li>
Graphic design
<ul>
<li>Item 21</li>
<li>Item 22</li>
<li>Item 23</li>
<li>Item 24</li>
</ul>
</li>
<li>
Development tools
<ul>
<li>Item 31</li>
<li>Item 32</li>
<li>Item 33</li>
<li>Item 34</li>
</ul>
</li>
<li>
Web design
<ul>
<li>Item 41</li>
<li>Item 42</li>
<li>Item 43</li>
<li>Item 44</li>
</ul>
</li>
</ul>
</li>
<li>
Work
<ul>
<li>
Work 1
<ul>
<li>
Work 11
<ul>
<li>Work 111</li>
<li>Work 112</li>
<li>Work 113</li>
</ul>
</li>
<li>
Work 12
<ul>
<li>Work 121</li>
<li>Work 122</li>
<li>Work 123</li>
</ul>
</li>
<li>
Work 13
<ul>
<li>Work 131</li>
<li>Work 132</li>
<li>Work 133</li>
</ul>
</li>
</ul>
</li>
<li>
Work 2
<ul>
<li>
Work 21
<ul>
<li>Work 211</li>
<li>Work 212</li>
<li>Work 213</li>
</ul>
</li>
<li>
Work 22
<ul>
<li>Work 221</li>
<li>Work 222</li>
<li>Work 223</li>
</ul>
</li>
<li>
Work 23
<ul>
<li>Work 231</li>
<li>Work 232</li>
<li>Work 233</li>
</ul>
</li>
</ul>
</li>
<li>
Work 3
<ul>
<li>
Work 31
<ul>
<li>Work 311</li>
<li>Work 312</li>
<li>Work 313</li>
</ul>
</li>
<li>
Work 32
<ul>
<li>Work 321</li>
<li>Work 322</li>
<li>Work 323</li>
</ul>
</li>
<li>
Work 33
<ul>
<li>Work 331</li>
<li>Work 332</li>
<li>Work 333</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
http://jsfiddle.net/uHuHE/

Answer 1

Just assign text-align: center; to #menu ul a
Demo
Side Note: If you want to be over specific with the nested level text alignment, you can always use > selector so say for example you want to align the text in 1st drop down level, than you can simply use
ul#menu > li {
/* Targets main menu items */
}
ul#menu > li > ul > li > a {
/* Targets 1st level dropdown */
}
And so on...
As you commented, you wanted to center the main menu items, than use #menu-wrap in the place of #menu {} declaration, assign some fixed width to your #menu and than use margin: auto;
Demo 2