CSS horizontale navigatie probleem

**JurjenvB** · 06-02-2014, 13:58

L.S.,

Ik ben op dit moment een geheel nieuwe design voor mijn website aan het maken. Een ding hiervan is een horizontaal menu die 2 horizontale submenu's heeft.

Mijn probleem: subsub-nav moet pas verschijnen tijdens het hoveren op 'submenu 2', zie code (CSS + HTML) hieronder. Ik krijg het niet voor elkaar, wat zie ik over het hoofd?

Dank, Jurjen

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<style type="text/css">

.menu {
  width:960px;
  margin: 10px auto;
}

.menu {
  margin-top:20px;
  height:150px;
  background:yellow;
}

.top-nav {
  text-align:center;
  font-size:0;
  position:relative;
}

.top-nav > li {
  display:inline-block;
  width:25%;
}

.top-nav > li:hover {
  background:green;
}

.top-nav > li.active {
  background:red;
}

.top-nav > li:last-of-type {
  
}

.top-nav > li a {
  text-decoration:none;
  font-size:28px;
  line-height:50px;
  text-align:center;
  color:black;
  display:block;
}

li.active a, 
.top-nav > li > a:hover,
.sub-nav > li > a:hover,
.subsub-nav > li> a:hover {
  color:black;
}

.top-nav li:hover ul {
  visibility:visible;
  text-align:left;
}

/*li.active ul{
  visibility:visible;
  text-align:left;  
}*/

.sub-nav {
  position:absolute;
  visibility:hidden;
  left:0;
  right:0
}
  
.sub-nav > li {
  display:inline-block;
  padding:0 25px;
}

.sub-nav > li a {
  border:none;
}

.sub-nav > li a:hover {
  background:blue;
}

.subsub-nav {
  position:absolute;
  visibility:hidden;
  left:0;
  right:0
}
  
.subsub-nav > li {
  display:inline-block;
  padding:0 25px;
}

.subsub-nav > li a {
  border:none;
}

.subsub-nav > li a:hover {
  background:red;
}

</style>

</head>
<body>
<div class="menu">
  <ul class="top-nav">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a>
      <ul class="sub-nav">
        <li><a href="#">Submenu 1</a></li>
        <li><a href="#">Submenu 2</a></li>
            <ul class="subsub-nav">
                <li><a href="#">Subsubmenu 1</a></li>
                <li><a href="#">Subsubmenu 2</a></li>
                <li><a href="#">Subsubmenu 3</a></li>
                <li><a href="#">Subsubmenu 4</a></li>
              </ul>
        <li><a href="#">Submenu 3</a></li>
        <li><a href="#">Submenu 4</a></li>
      </ul>
    </li>
    <li><a href="#">Menu 3</a>
      <ul class="sub-nav">
        <li><a href="#">Submenu 5</a></li>
        <li><a href="#">Submenu 6</a></li>
        <li><a href="#">Submenu 7</a></li>
      </ul>
    </li>
    <li><a href="#">Menu 4</a></li>
  </ul>
</div>
</body>
</html>

**Patrick Groot** · 06-02-2014, 14:05

Ten eerste zit je menu niet goed in elkaar! Daar begint het al mee...

Code:

<li><a href="#">Menu 2</a>
      <ul class="sub-nav">
        <li><a href="#">Submenu 1</a></li>
        <li><a href="#">Submenu 2</a></li>
            <ul class="subsub-nav">
                <li><a href="#">Subsubmenu 1</a></li>
                <li><a href="#">Subsubmenu 2</a></li>
                <li><a href="#">Subsubmenu 3</a></li>
                <li><a href="#">Subsubmenu 4</a></li>
              </ul>
        <li><a href="#">Submenu 3</a></li>
        <li><a href="#">Submenu 4</a></li>
      </ul>
    </li>

Moet zijn:

Code:

<li><a href="#">Menu 2</a>
      <ul class="sub-nav">
        <li><a href="#">Submenu 1</a></li>
        <li><a href="#">Submenu 2</a>
            <ul class="subsub-nav">
                <li><a href="#">Subsubmenu 1</a></li>
                <li><a href="#">Subsubmenu 2</a></li>
                <li><a href="#">Subsubmenu 3</a></li>
                <li><a href="#">Subsubmenu 4</a></li>
              </ul>
        </li>
        <li><a href="#">Submenu 3</a></li>
        <li><a href="#">Submenu 4</a></li>
      </ul>
    </li>

Voeg daar aan toe:

Code:

.top-nav li:hover ul li ul {  
  visibility:hidden;
  text-align:left;
}


.top-nav li ul li:hover ul {
  visibility:visible;
  text-align:left;
}

Dan zou dat moeten werken!

Gr,
Patrick

**JurjenvB** · 06-02-2014, 14:39

Werkt perfect, bedankt!

CSS horizontale navigatie probleem

CSS horizontale navigatie probleem [opgelost!]

Re: CSS horizontale navigatie probleem

Re: CSS horizontale navigatie probleem

Tags voor dit bericht

Quick links

Sitedeals

Andere media

Over Sitedeals

CSS horizontale navigatie probleem

CSS horizontale navigatie probleem [opgelost!]

Re: CSS horizontale navigatie probleem

Re: CSS horizontale navigatie probleem

Tags voor dit bericht

Quick links

Sitedeals

Andere media

Over Sitedeals

Inloggen