CSS nested menu is not aligned properly - html

Question

I have a basic nested menustruct:
http://jsfiddle.net/vqnUP/
#topmenu
{
min-height: 54px;
width: 980px;
margin: 0 auto;
background-color: green;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
#topmenu ul
{
list-style-type: none;
margin: 0 0 0 0;
padding: 13px 0 0 0;
color: #fff;
font-size: 1.6em;
}
#topmenu ul li
{
display: inline;
padding: 15px 2.5% 17px 2.5%;
margin: 0 0 0 0;
border-right: 1px solid #000;
box-shadow: 1px 0px 0px #6e6b6b;
position: relative;
}
#topmenu ul li:last-child
{
border: none;
box-shadow: none;
}
#topmenu ul li:first-child
{
border-top-left-radius: 15px;
}
#topmenu ul li img
{
vertical-align: middle;
}
#topmenu a
{
color: #fff;
text-decoration: none;
height: 54px;
}
#topmenu ul li ul{
display: none;
list-style-type: none;
margin: 0 0 0 0;
padding: 13px 0 0 0;
color: #fff;
font-size: 1.6em;
position: absolute;
z-index: 1000;
background-color: red;
}
#topmenu ul li:hover ul{
display: block;
}
#topmenu ul li ul li{
display: block;
padding: 15px 2.5% 17px 2.5%;
margin: 0 0 0 0;
border-right: 1px solid #000;
box-shadow: 1px 0px 0px #6e6b6b;
font-size: 14px;
}
#topmenu ul li ul li:last-child{
border: none;
box-shadow: none;
}
#topmenu ul li ul li:first-child{
border-top-left-radius: 15px;
}
#topmenu ul li ul li img{
vertical-align: middle;
}
<div id="topmenu">
<ul>
<li class=""><a href="home"><img src='/assets/upload/pagemenu/home.png' /></li>
<li class="">Tanßr</li>
<li class="">Dißk</li>
<li class="">SzŘl§</li>
<li class="">Nyelviskola</li>
<li class="">
Boltok
<ul>
<li class="">aaaaaaaa</li>
<li class="">aaaaaaaaa</li>
</ul>
</li>
<li class="">Kapcsolat</li>
<li class="">Linkek</li>
<li class="kiemelt">Webshop</li>
</ul>
<div style="clear: both;"></div></div>
its almost OK, but the submenu in "Boltok" (containing aaaaaaa) doesnt appear excatly under the "Boltok" menu, but aligned to left. I can't figure out the mistake...

Answer 1

I added a top and left to your sub menu
#topmenu ul li ul{
display: none;
list-style-type: none;
margin: 0 0 0 0;
padding: 13px 0 0 0;
color: #fff;
font-size: 1.6em;
position: absolute;
z-index: 1000;
background-color: red;
top: 62px; /* added */
left: 0; /* added */
width: 100%; /* this will cause the submenu to take the 100% width of the containing li - optional? */
};
So we only target the first ul li's you change this class like this. Also added a float: left and changed the display to block
#topmenu > ul > li
{
display: block; float: left;
padding: 15px 2.5% 17px 2.5%;
margin: 0 0 0 0;
border-right: 1px solid #000;
box-shadow: 1px 0px 0px #6e6b6b;
position: relative;
}
Here's the updated fiddle: http://jsfiddle.net/vqnUP/2/

Answer 2

jsFiddle
I'm only addressing the issue you mentioned.
I have just added
width:100%; to #topmenu ul li ul and
text-align:center; to #topmenu ul li ul li.
Hope that helps...