Hej,
proszę niech ktoś rzuci okiem na kod, bo od kilku godzin się męczę.
Efekt jak na zdjęciu. Nie mam pojęcia czemu ucina mi dół elementu <li>, ucieta czesc to padding-bottom. Troche w CSSie jest burdel ale po prostu testuję różne przypadki. Uciecie natepuje w momencie najechania, korzystam z jQuery slideDown
body {
margin: 0px;
padding: 0px;
border: 0px;
}
#container {
width: 960px;
margin: 50px auto;
}
ul {
list-style-type: none;
padding: 0px;
}
li {
padding: 20px 0px;
}
#menu{
height: 40px;
}
#menu ul li {
position: relative;
display: block;
text-align: center;
font-family: Georgia;
font-weight: bold;
width: 140px;
}
.podmenu li a{
color: #fff;
text-decoration: none;
display: block;
}
.podmenu ul li ul {
position: absolute;
top: 0px;
left: 140px;
}
.podmenu ul {
display: none;
}
li {
background-color: rgba(0,0,0,0.7);
}
.podmenu li ul li:hover {
background-color: #ff0000;
color: #000;
}
HTML
<body>
<div id="container">
<div id="menu">
<ul class="podmenu">
<li><a href="http://jquery.com/">O firmie</a>
<ul>
<li><a href="http://jquery.com/">O firmie 1</a></li>
<li><a href="http://jquery.com/">O firmie 2</a>
<ul>
<li><a href="http://jquery.com/">O firmie 21</a></li>
<li><a href="http://jquery.com/">O firmie 22</a></li>
<li><a href="http://jquery.com/">O firmie 23</a>
<ul>
<li><a href="http://jquery.com/">O firmie 231</a></li>
<li><a href="http://jquery.com/">O firmie 232</a></li>
<li><a href="http://jquery.com/">O firmie 233</a></li>
<li><a href="http://jquery.com/">O firmie 234</a></li>
</ul>
</li>
<li><a href="http://jquery.com/">O firmie 24</a></li>
</ul>
</li>
<li><a href="http://jquery.com/">O firmie 3</a></li>
<li><a href="http://jquery.com/">O firmie 4</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>