I have designed a header for my website with the following styles:
.header-cont {
width:100%;
position:fixed;
top:0px;
}
.header {
height:50px;
background:#F0F0F0;
border:1px solid #CCC;
width:950px;
margin:0px auto;
}
.header-button {
background: #73e3eb;
background-image: -webkit-linear-gradient(top, #73e3eb, #5ec9d1);
background-image: -moz-linear-gradient(top, #73e3eb, #5ec9d1);
background-image: -ms-linear-gradient(top, #73e3eb, #5ec9d1);
background-image: -o-linear-gradient(top, #73e3eb, #5ec9d1);
background-image: linear-gradient(to bottom, #73e3eb, #5ec9d1);
-webkit-border-radius: 13;
-moz-border-radius: 13;
border-radius: 13px;
font-family: Lora;
color: #6293ad;
font-size: 20px;
padding: 20px 15px 10px 15px;
text-decoration: none;
}
.clearfix:after {
display:block;
clear:both;
}
.menu-wrap {
width:100%;
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
background:#3e3436;
}
.menu {
width:1000px;
margin:0px auto;
}
.menu li {
margin:0px;
list-style:none;
font-family:'Ek Mukta';
}
.menu a {
transition:all linear 0.15s;
color:#919191;
}
.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
color:#be5b70;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:19px;
}
.menu > ul > li > a {
padding:10px 40px;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background:#2e2728;
}
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:150px;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0,0,0,0.2);
background:#2e2728;
}
.sub-menu li {
display:block;
font-size:16px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background:#3e3436;
}
<html>
<head></head>
<body>
<div class="header-cont">
<div class="header">
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li class="current-item"><a href="#">Home</a></li>
<li><a href="#"><span class="arrow">▼</span>Sites</a>
<ul class="sub-menu">
<li><a href="#">Site A</a></li>
<li><a href="#">Site B</a></li>
<li><a href="#">Site C</a></li>
<li><a href="#">Site D</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
Apologies for the lengthy code description. I am facing an issue where the dropdown menu appears when hovering over any area below the 'Sites' item instead of just on hover of the 'Sites'. If anyone knows how to fix this, please let me know. Thanks!