От: Относно css падащи менюта ,моля за помощ!
а ето го и кода ако някой се интересува :
HTML :
<div id="top-navigation">
<ul class="lavaLamp" id="menu">
<li><a class="active" href="./index.html">Начало</a></li>
<li><a href="#">Услуги</a>
<ul>
<li><a href="./slider.html">Ламперия</a></li>
<li><a href="./tab.html">jQuery Tab</a></li>
<li><a href="./styling.html">HTML Styling</a></li>
<li><a href="./column.html">Column Layouts</a></li>
</ul>
</li>
<li><a href="#">Цени</a>
<ul>
<li><a href="./default.html">Ламперия</a></li>
<li><a href="./fullwidth.html">Ламперия</a></li>
<li><a href="./testimonials.html">Ламперия</a></li>
<li><a href="./single.html">Ламперия</a></li>
<li><a href="./table.html">Ламперия</a></li>
</ul>
</li>
<li><a href="#">Продукция</a>
<ul>
<li><a href="./portfolio4.html">Ламперия</a></li>
<li><a href="./portfolio.html">Portfolio One Column</a></li>
</ul>
</li>
<li><a href="./blog.html">Галерия</a></li>
<li><a href="./contact.html">Контакти</a></li>
</ul>
<div class="clear"></div><!-- clear float -->
</div>
CSS :
#top-navigation{
padding:50px 0 0 0;
position:relative;
z-index:200;
float:right;
}
#menu{
margin:0;
padding:0;
list-style-type:none;
overflow:visible;
background-image:url('menubg3.PNG');
}
#menu ul {
margin:0;
padding:0;
list-style-type:none;
}
#menu li {
margin: 0;
padding: 0;
float:left;
height:46px;
}
#menu a {
display: block;
line-height: 36px;
/*overflow: hidden;*/
margin: auto 15px;
color:#FAF499;
font-size:15px;
text-decoration:none;
}
#menu li a:hover {
color: #ffffff;
text-decoration: none;
display: block;
}
#menu li ul {
list-style: none;
position: absolute;
width: 170px;
top: 46px;
left: -999em;
padding:10px 0;
z-index:10;
background-color:#2f000c;
-moz-border-radius: 6px; /* Firefox */
-webkit-border-radius: 6px; /* Safari, Chrome */
border-radius: 6px; /* CSS3 */
}
#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}
#menu li li {
margin: 0;
padding: 0;
width: 170px;
left: auto;
height:auto !important;
}
#menu li li:first-child{
background: url(../images/border-nav.gif) !important;
background-repeat:repeat-x !important;
background-position:top !important;
}
#menu li li a {
width: 140px;
color:#c0c0c0;
line-height:18px;
background-color: #2f000c;
margin: 0;
padding: 8px 15px 8px 15px;
background: url(../images/border-nav.gif);
background-repeat:repeat-x;
background-position:bottom;
}
#menu li li a:hover {
padding: 8px 15px 8px 15px;
}
#menu li li:hover {
background-color: #3a0d18 !important;
}
#menu li:hover, #menu li.sfhover { /* prevents IE7 drop-down menu bug (focus on a page element prevents nested menus from disappearing) */
position: static;
}
.lavaLamp {
position: relative;
height: 36px;
padding: 0px 0px 0px 0px;
overflow: hidden;
}
.lavaLamp li {
list-style: none;
padding-right: 10px;
float:left
}
#menu li.back {
background: url(../images/lava.png) no-repeat right -40px;
width: 9px; height: 36px;
z-index: 8;
position: absolute;
z-index: -1;
}
#menu li.back .left {
background: url(../images/lava.png) no-repeat top left;
height: 36px;
margin-right: 9px; /* 7px is the width of the rounded shape */
z-index: -1;
}
.lavaLamp li a {
z-index: 10;
}
.lavaLamp li.current, .lavaLamp li.current a, .lavaLamp li.current a:visited{font-weight:bold !important;}
.lavaLamp li.current li a, .lavaLamp li.current li a:visited{font-weight:normal !important;}
:shock: