Beste mensen,
een tijd geleden heb ik ook hulp gevraagd met een dropdown menu ik heb hem nu bijna klaar. maar ik zit nu met het volgende probleem.
Op website: http://www.rbvhoogeveen.nl ziet u het menu.
nu heb ik het volgende als u over de links gaat en dan gaat het in dit geval om de link vereniging komt er een drop down menu. als je met je muis naar het drop down gedeeldte gaat springt de hover weer weg bij vereniging. ik heb veel dingen al geprobeerd. door de hover te koppelen aan het drop down gedeeldte.
misschien doe ik het niet goed. Dus mijn vraag is weet iemand hoe ik het moet oplossen.
Hieronder zou ik de html en css posten
HTML:
PHP
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>R.B.V. Hoogeveen</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/menu.css" />
</head>
<body>
<div id="wrapper"><!-- wrapper om hele site -->
<div id="bg-image"></div>
<div id="menu-balk"><!-- begin menu -->
<div id="navigatie">
<ul class="nav">
<li class="current">
<a href="index.php">
<span class="linker-tab"></span>
<span class="midden">Home</span>
<span class="rechter-tab"></span>
</a>
</li>
<div class="split"></div>
<li>
<a href="index.php">
<span class="linker-tab"></span>
<span class="midden">Vereniging</span>
<span class="rechter-tab"></span>
</a>
<ul>
<div class="sub"></div>
<li><a href="#">Geschiedenis</a></li>
<li><a href="#">Het Logo</a></li>
<li><a href="#">Bestuur</a></li>
<li><a href="#">Geschiedenis</a></li>
<div class="sub-onder"></div>
</ul>
</li>
<div class="split"></div>
<li>
<a href="index.php">
<span class="linker-tab"></span>
<span class="midden">Teams</span>
<span class="rechter-tab"></span>
</a>
</li>
<div class="split"></div>
<li>
<a href="index.php">
<span class="linker-tab"></span>
<span class="midden">Gallery</span>
<span class="rechter-tab"></span>
</a>
</li>
<div class="split"></div>
<li>
<a href="index.php">
<span class="linker-tab"></span>
<span class="midden">Gastenboek</span>
<span class="rechter-tab"></span>
</a>
</li>
<div class="split"></div>
<li>
<a href="index.php">
<span class="linker-tab"></span>
<span class="midden">Contact</span>
<span class="rechter-tab"></span>
</a>
</li>
<div class="split"></div>
</ul>
</div>
</div><!-- einde menu -->
</div><!-- einde wrapper site -->
</body>CSS:
PHP
/* om stippel lijn weg te halen */
.nav a:focus {outline: 0;}
.nav a:active {outline: 0;}
/* ---------------- */
/* div om menu heen */
#navigatie {
position: absolute;
width: auto;
height: auto;
margin-top: 10px;
}
/* ---------------- */
.nav, nav ul {
position: relative;
left: 4px;
padding: 0;
margin: 0;
list-style: none;
}
.nav li {
position: relative;
float: left;
list-style: none;
margin-left: 15px;
}
/* stijlen van link */
.nav li a {
font-family: Calibri;
font-size: 16px;
text-decoration: none;
}
/* ---------------- */
/* curve tabs om links */
.nav li span.linker-tab {
background: url(../images/menu-links.png) left top no-repeat;
height: 32px;
float: left;
padding-left: 5px;
}
.nav li span.midden {
color: #fff;
background: url(../images/menu-midden.png) repeat-x;
height: 31px;
width: auto;
float: left;
margin-top: 1px;
}
.nav li span.rechter-tab {
background: url(../images/menu-rechts.png) right top no-repeat;
height: 32px;
float: left;
padding-right: 5px;
}
/* ---------------- */
/* hover menu */
.nav li a:hover span.linker-tab {
background: url(../images/menu-hover-links.png) left top no-repeat;
height: 32px;
float: left;
padding-left: 5px;
}
.nav li a:hover span.midden {
color: #419fff;
background: url(../images/hover-midden.png) repeat-x;
height: 31px;
width: auto;
float: left;
margin-top: 1px;
}
.nav li a:hover span.rechter-tab {
background: url(../images/menu-hover-rechts.png) right top no-repeat;
height: 32px;
float: left;
padding-right: 5px;
}
/* ---------------- */
/* tussen stuk menu */
.split {
background: url(../images/split.png);
height: 31px;
width: 2px;
position: relative;
left: 7px;
top: -3px;
float: left;
}
/* ---------------- */
/* current */
.nav li.current span.linker-tab {
background: url(../images/menu-hover-links.png) left top no-repeat;
height: 32px;
float: left;
padding-left: 5px;
}
.nav li.current span.midden {
color: #419fff;
background: url(../images/hover-midden.png) repeat-x;
height: 31px;
width: auto;
float: left;
margin-top: 1px;
}
.nav li.current span.rechter-tab {
background: url(../images/menu-hover-rechts.png) right top no-repeat;
height: 32px;
float: left;
padding-right: 5px;
}
/* ---------------- */
/* begin dropdown */
/* boven kant dropdown menu met curve */
ul.nav ul .sub {
z-index: 1;
position: absolute;
background: url(../images/sub-menu-top.png) no-repeat;
width: 185px;
height: 9px;
left: 0px;
top: -6px;
}
/* ---------------- */
/* dropdown*/
ul.nav ul {
background: url(../images/sub-menu-midden.png) repeat-y;
width: 145px;
height: auto;
z-index: 1;
position: absolute;
top: 32px;
margin-left: 1px;
/* verbergt submenu */
visibility: hidden;
}
/* ---------------- */
/* instellen weergave submenu */
ul.nav li:hover ul {
visibility: visible;
}
/* ---------------- */
ul.nav ul li {
width: 160px;
margin: 0;
padding-left: 2px;
line-height: 30px;
margin-left: -30px;
border-bottom: 1px dashed #419fff;
}
/* stijlen van sublink */
.nav li ul a {
color: #419fff;
font-family: Calibri;
font-size: 14px;
text-decoration: none;
display: block;
}
/* ---------------- */