i solved it myself
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-image: url("texture.jpg");
background-repeat: repeat-x;
}
nav{
position: absolute;
left: 440px;
margin-top: 49px;
}
nav ul{
position: relative;
display: -webkit-box;
border-bottom-color: #000;
list-style: none;
border: 0;
}
nav ul li{
width: 70px;
height: 35px;
display: block;
background-color: #fff;
border-right-style: solid;
border-right-width: 1px;
text-align: center;
}
nav ul li ul{
display: none;
height: 0;
=webkit-transition: height 1s;
}
nav ul li:hover{
background-color: #5ea2d8;
}
nav ul li:hover ul{
position: absolute;
height: 100%;
display: block;
opacity: 100%;
}
nav ul li:hover ul li{
width: 100px;
position: relative;
top: 16px;
left: -55px;
border-right-style: none;
border-top-style: solid;
border-top-width: 1px;
}
nav ul li:hover ul li.last{
border-bottom-style: solid;
border-bottom-width: 1px;
}
nav a{
position: relative;
top: 8px;
text-decoration: none;
color: #000;
}
nav a:hover{
color: #fff
}
and for scroll functionality:
var isFixed = false;
$(window).scroll(function() {
var nav = $('#nav');
var scrollTop = $(window).scrollTop();
var shouldBeFixed = scrollTop > 100;
if(shouldBeFixed){
}
if (shouldBeFixed && !isFixed) {
nav.css({position: 'fixed', top: 0,'margin-top': '0'});
isFixed = true;
}
else if (!shouldBeFixed && isFixed){
nav.css({position: 'relative','margin-top': '30px'});
isFixed = false;
}
});