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