<ul id="menu">
<li id="menu1"> <a href="#"> Link 1</a> </li>
<ul id="menu2">
<li><a href="#"> Link 1.1 </a></li>
<li><a href="#"> Link 1.2 </a></li>
<li><a href="#"> Link 1.3 </a></li>
</ul>
</ul>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <!-- BIBLIOTEK jQuery -->

<script type="text/javascript">

$(document).ready(function() {
$('#menu1').mouseover(function() {
$('#menu2').slideDown();
});

$('#menu1').mouseout(function() {
$('#menu2').slideUp();
});
});
</script>

header ul {
display: block;
position: absolute;
margin: 1.5% 0 0 30%;
}
header ul li {
list-style: none;
padding: 7px;
border: 1px solid black;
width: 60px;
height: 30px;
}
header ul a {
text-decoration: none;
color: white;
font-weight: bold;
}
header ul ul {
display: none;
margin: 0;
padding: 0;
}