tutorials.de - Elementhöhe nicht korrekt bei Hover mit Anzeige weiterer Elemente | Post #1

by SpiceLab

HTML

<h3>container background not shown
</h3>
<nav id="primary_nav_wrap">
  <ul>
    <li><a href="#">...</a></li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#" class="arrow">Link 2</a>
      <ul>
        <li><a href="#">Link 2.1</a></li>
        <li><a href="#">Link 2.2</a></li>
        <li><a href="#" class="arrow">Link 2.3</a>
          <ul>
            <li><a href="#">Link 2.3.1</a></li>
            <li><a href="#">Link 2.3.2</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Link 3</a></li>
  </ul>
</nav>

CSS

#primary_nav_wrap {
  margin-bottom: 25px;
  width: 500px;
  background: #f9f9f9;
  min-height: 33px;
}

#primary_nav_wrap>ul {
  background: #eee;
  border-bottom: 1px solid #ddd;
}

#primary_nav_wrap ul {
  list-style: none;
  position: relative;
  overflow: visible;
  float: left;
  margin: 0;
  padding: 0;
}

#primary_nav_wrap ul a {
  background:#f9f9f9;
  display: block;
  color: #333;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  line-height: 32px;
  padding: 0 15px;
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  white-space: nowrap;
}

#primary_nav_wrap ul li {
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
}

#primary_nav_wrap>ul>li a {
  border-left:1px solid #fff;
  border-right:1px solid #ddd;
}

#primary_nav_wrap ul li a span {
  position: relative;
  top: -3px;
  margin-left: 3px;
}

#primary_nav_wrap>ul>li:first-child>a:first-child {
  font-weight: 900;
  font-size: large;
}

#primary_nav_wrap ul li.current-menu-item {
  _background: #ddd
}

#primary_nav_wrap ul li:hover,
#primary_nav_wrap ul li a:hover {
  background: #eee
}

#primary_nav_wrap ul ul {
  display: none;
  /*position: absolute;
  top: 100%;
  left: 0;*/
  background: #eee;
  padding: 0;
}

#primary_nav_wrap ul ul li {
  float: none;
  _max-width: 500px
}

#primary_nav_wrap ul ul a {
  line-height: 120%;
  padding: 10px 15px
}

#primary_nav_wrap ul ul ul {
  top: 0;
  left: 100%;
}

#primary_nav_wrap ul li:hover > ul {
  display: block;
  overflow: visible;
}

a.arrow:after {  
  content: '⌄'; 
  position:relative;
  top:-3px;
  right:-3px
}