html.de - CSS MENÜ - Demo #2

by SpiceLab

HTML

<div class="nav_subtitleIDshow">
  <a href="/" title="" class="nav_haveSub">Hover 1</a>
  <div class="nav_subtitle">
    <a href="" title="">1.1</a>
    <a href="" title="">1.2</a>
  </div>
</div>
<div class="nav_subtitleIDshow">
  <a href="/" title="">No-Hover</a>
</div>
<div class="nav_subtitleIDshow">
  <a href="/" title="" class="nav_haveSub">Hover 2</a>
  <div class="nav_subtitle">
    <a href="" title="">2.1</a>
    <a href="" title="">2.2</a>
  </div>
</div>

CSS

.nav_subtitleIDshow {
position: relative;
display: inline-block;
}
.nav_subtitle {
display: none;
position: absolute;
z-index: 109;
}
.nav_subtitle a {
display:block;
padding: 12px;
font-weight: normal;
color: white;
background-color: #16a3fe;
width: 180px;
text-align: center;
border-bottom: 3px solid #16A3FE;
border-top: 3px solid #16A3FE;
}
.nav_subtitle a:hover {
border-bottom: 3px solid #0198f9;
border-top: 3px solid #0198f9;
background-color: #0198f9;
}
.nav_subtitleIDshow:hover .nav_subtitle{
display: block;
}