html.de - CSS MENÜ - Demo #1

by SpiceLab

HTML

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

CSS

.nav_subtitleIDshow {
position: relative;
display: inline-block;
}
.nav_subtitle {
display: none;
position: absolute;
z-index: 109;
}
.nav_content_sub {
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_content_sub:hover {
border-bottom: 3px solid #0198f9;
border-top: 3px solid #0198f9;
background-color: #0198f9;
}
.nav_subtitleIDshow:hover .nav_subtitle{
display: block;
}