CSS HTML dropdown menu not showing full text and text not aligned - html

Question

I have edited this post as it has partially solved my problem. However, i am faced with a new problem now and i do not wish to create a new question in case its deemed of spamming. currently, my add subject, drop subject, delete subject, manual crawl is not centralised even though i have specified it to be text-align center in #menu li li a. The sub menu's executive summary is also cut off. May I know how can i expand the submenu and centralise all my text?Thank you!
Here is my code (i am really sorry because i do not have a jsfiddle acct and is on the waiting list):
HTML
<div id="menu">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" >Executive Summary</a></li>
<li><a href="#" > Visual Analytics</a></li>
<li><a href="#" >Settings</a>
<ul>
<li>Add Subject</li>
<li>Delete Subject</li>
<li> Edit Subject</li>
<li><a href="#" >Manual Crawl</a></li>
<li><a href="#" >Executive Summary</a></li>
</ul>
</li>
</ul>
​
CSS
#menu {
position: relative;
float: left;
width: 1200px;
height: 35px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
padding: 0;
background: #000;
text-align: center;
}
#menu ul {
position: relative;
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
#menu li {
position: relative;
float: left;
height: 100%;
padding: 0;
line-height: 35px;
}
#menu a {
position: relative;
height: 100%;
width: auto;
float: left;
text-decoration: none;
padding: 0 0 0 25px;
margin: 0 3px;
color: #fff;
text-align: center;
}
#menu ul ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: rgba(0,0,0,0.5);
}
#menu li:hover ul {
display:block;
position: absolute;
top: 35px;
left: 0;
margin: 0;
padding: 0;
z-index: 1;
}
#menu li li a{
height: 35px;
width: 100%;
float: left;
text-decoration: none;
padding: 0 0 0 25px;
margin: 0 3px;
color: #fff;
text-align: center;
}
#menu li li a:hover{
background: rgba(255,255,255,0.5);
}
​

Answer 1

This should get you running:
#menu ul, #menu li {
list-style:none;
margin:0;
padding:0;
}
#menu ul li {
float:left;
position:relative;
}
#menu ul li a {
display:block;
height:35px;
margin-right:5px;
}
#menu ul li ul {
display: none;
background-color: rgba(0,0,0,0.5);
}
#menu ul li:hover ul, #menu ul li.hover ul {
display: block;
position: absolute;
top:40px;
left:0
margin: 0;
padding: 0;
z-index:1;
}
#menu ul li ul li a {
display:block;
height:35px;
width:130px
background-color: rgba(0,0,0,0.5);
}
#menu ul li ul li a:hover{
background:rgba(255,255,255,0.5);
}
One thing you missed is to set position:relative for the PARENT of the sub-menu. This is important because this resets the origin for the child item. I've also cleaned things up and removed some redundant declarations. You may need to re-style your text a bit.
One important point: All styling of the menu (other than positioning) should be applied to the A-tag, not the LI. This includes fonts. bg colours etc.
See: http://preview.moveable.com/jm/ilovelists/

Answer 2

Use a combinaison of position: relative and position: absolute; to fix your problem
See the JsFiddle http://jsfiddle.net/VDmJj/1/

Answer 3

Add :
1) position:relative; to #menu ul li
2) top:30px; left:10px; to #menu ul li:hover ul, #menu ul li.hover ul
3) width:180px; to #menu ul li ul (this can depend on the sub menu items)
This would give you the desired result by doing minimal changes. Though the css is a bit complicated for the task it is performing i.e. it can be done pretty simple by following method:
http://jsfiddle.net/tPBmV/
Here is another fiddle i found based on jquery.
http://jsfiddle.net/davidThomas/YfjzP/
Its not made by me but you could find it useful if you are comfortable enough to implement jquery.

Answer 4

Check out the fiddle. Did a lot of CSS changes: http://jsfiddle.net/wAGGA/
CSS:
#menu {
width:1200px;
height:35px;
padding:0px;
clear:both;
background-color:#000;
}
#menu ul{
list-style:none;padding:0 0 0 400px;margin: auto;display:block;
}
#menu ul li {
list-style:none;display:inline;float:left;width:auto;height:35px;padding:0px;line-height:35px; font-family:Arial, Helvetica, sans-serif; font-size:13px; }
#menu ul li a{
display:block;height:35px; width: auto;float:left;text-decoration:none;padding:0 0 0 25px; margin:0px 3px 0px 3px;color:#fff;text-align:center;}
#menu ul li ul {
display: none;
width: 200px; /* Width to help Opera out */
background-color: rgba(0,0,0,0.5);}
#menu ul li:hover ul, #menu ul li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
z-index:1;
top: auto;
margin-top: 35px;
right: 0;
}
#menu ul li ul li {display: block; float: none; width: 100%}
#menu ul li ul li a{
display:block;
height:35px;
text-decoration:none;
padding:0 0 0 25px;
margin:0px 3px 0px 3px;
color:#fff;
text-align:center;
}
#menu ul li ul li a:hover{
background:rgba(255,255,255,0.5);
}​

Answer 5

add margin-top to sub menu like this
#menu ul li:hover ul, #menu ul li.hover ul{
margin-top:40px
}