<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<style>
body{padding: 0;margin: 0;border: 0;line-height: 1;}
ul,li{list-style: none;margin: 0;padding: 0;}
a{
display: block;
text-decoration: none;
font-family: Arial,Tahoma,verdana, sans-serif;
padding: 15px;
color: #ffffff;
font-size:12px;
background: #333333;
transition: all 0.3s ease;
}
#menu {
position: relative;
float: left;
}
#menu li {
float: none;
min-height: 1px;
line-height: 1em;
vertical-align: middle;
position: relative;
}
#menu li.hover,#menu li:hover {
position: relative;
cursor: default;
}
#menu li a {/*ana menü*/
color: #ffffff;
}
#menu li a:hover,#menu li:hover a,#menu li:hover ul {/*ana hover tüm arka plan*/
background: #111133;
visibility: visible;
}
#menu ul {
visibility: hidden;
position: absolute;
width: 100%;
top: 0px;
left: 99%;
}
#menu ul li:hover a {/*alt menü hover*/
background: #555f5f;
color: #ffffff;
}
</style>
</head>
<body>
<ul id='menu'>
<li><a href='#'><span>Menü1</span></a>
<ul>
<li ><a href='#'><span>A1</span></a></li>
<li ><a href='#'><span>A2</span></a></li>
</ul>
</li>
<li><a href='#'><span>Menü2</span></a>
<ul>
<li ><a href='#'><span>B1</span></a></li>
<li ><a href='#'><span>B2</span></a></li>
</ul>
</li>
</ul>
</body>
<html>
