Slide Menu
HTML
<ul id="menu">
<li><a href="#">Start</a></li>
<li><a href="#">Katalog</a>
<ul class="submenu">
<li><a href="#">Katalog1</a></li>
<li><a href="#">Katalog2</a></li>
<li><a href="#">Katalog3</a></li>
</ul>
</li>
<li><a href="#">Help</a>
<ul class="submenu">
<li><a href="#">Help1</a></li>
<li><a href="#">Help2</a></li>
<li><a href="#">Help3</a></li>
</ul>
</li>
<li><a href="#">Support</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Contact</a></li>
</ul>
CSS
ul#menu {
list-style: none outside none;
background: #062c4b;
height: 40px;
margin: 0px;
padding: 0px;
}
ul#menu li {
float: left;
width: 150px;
text-align: left;
position: relative;
height: 40px;
}
ul#menu li a {
color: #FFF;
text-decoration: none;
display: block;
padding: 10px 0px 0px 5px;
}
ul#menu li a:hover {
text-decoration: none;
color: #FFF;
}
ul#menu li ul.submenu {
list-style: none outside none;
width: 150px;
background: #062c4b;
position: absolute;
top: 40px;
margin: 0px;
padding: 0px;
display: none;
}
ul#menu li ul.submenu li {
height: 40px;
text-align: left;
}
ul#menu li ul.submenu li a {
background: none;
color: #1ed1d8;
text-decoration: none;
border: none;
padding: 10px 0px 10px 5px;
}
ul#menu li ul.submenu li a:hover {
background: #0f4765;
color: #FFF;
border: none;
}
JAVASCRIPT
$(document).ready(function() {
$("ul#menu li").hover(function(){
$(this).find(".submenu").slideDown();
},
function(){
$(this).find(".submenu").slideUp();
}
);
});
