problem with overlaping ul menu

[Sue Nagyova]

Hello,
I'm not sure, if the problem is in CSS, or in html. So I post it here, hoping I can find help to resolve it. I created menu using <ul> tags, and one item of that menu (Portfolio) has own <ul> submenu. But items following Portfolio overlap all submenu items (see enclosured picture).

I also add part of CSS code:

/* Sidebar */

#sidebar {
float: left;
width: 215px;
padding: 30px 0 0 30px;
margin-left: 8px;
min-height: 600px;

}

#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
margin: 0 0 2em 0;
line-height: 20px;
}

#page #sidebar .odkaz {
margin: 0;
padding:0;
display: block;
height: 32px;
}

#page #sidebar .odkaz li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #dee327;
text-align: left;
text-decoration: none;
padding-left: 55px;
padding-top: 4px;
display: block;
height: 32px;
background:url(images/menu_button.png) no-repeat;
}

#page #sidebar .odkaz li a:hover {
color: #FFFFFF;
background: url(images/menu_button_over.png) no-repeat;
}

#page #sidebar .odkaz .li_sub {
border-width: 0px;
padding:10px;
margin: 10px;
height: 30px;
width: 180px;

}

#page #sidebar .odkaz .li_sub li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #666;
text-align: left;
text-decoration: none;
padding-left: 10px;
background:url(images/menu_button_in.png) no-repeat;
}

#page #sidebar .odkaz .li_sub li a:hover {
color: #333333;
background: url(images/menu_button_in_over.png) no-repeat;
}

/* END OF SIDEBAR */

and this is part of html code:


<!-- start sidebar -->
<div id="sidebar">

<div class="odkaz">
<ul>
<li><a href="studio.html">&nbsp;štúdio</a></li>
<li><a href="sluzby.html">&nbsp;služby</a></li>
<li><a href="portfolio.html">&nbsp;portfólio</a></li></ul>
<ul class="li_sub">
<li><a href="portfolio/f_tlacoviny.html">&nbsp;firemné tlačoviny</a></li>
<li><a href="portfolio/inzercia.html">reklamná inzercia</a></li>
<li><a href="portfolio/propag.html">propagačné materiály</a></li>
<li><a href="portfolio/publikacie.html">periodické publikácie</a></li>
<li><a href="portfolio/o_tlacoviny.html">&nbsp;osobné tlačoviny</a></li>
<li><a href="portfolio/ilustracie.html">&nbsp;kreslené ilustrácie</a></li></ul>
<ul>
<li><a href="hotovky.html">&nbsp;hotovky</a></li>
<li><a href="spolupraca.html">&nbsp;spolupráca</a></li>
<li><a href="kontakt.html">&nbsp;kontakt</a></li>
</ul>
</div>
</div>
<!-- end sidebar -->

I'll be thankful for any answer.

[EisBear]

Remove line:
height: 30px;
from:



#page #sidebar .odkaz .li_sub {
border-width: 0px;
padding:10px;
margin: 10px;
width: 180px;
}


Visit this site for more info:
http://help.dottoro.com/lcabkdni.php