tim687
Terugkerende gebruiker
- Lid geworden
- 25 apr 2010
- Berichten
- 1.774
Beste leden,
Ik ben een site aan het maken waarbij ik een hoofdmenu en submenu's wil. Ik moet deze 2 scheiden van elkaar omdat de layout voor elk anders is.
Dit is de html code:
Dit is de CSS code:
Wat er nu gebeurd als ik over de hoofdmenu's hover, is dat de submenu's te voorschijn komen. Alleen als ik naar een submenu probeer te gaan, verdwijnen deze weer. Kan iemand mij de oplossing tot dit raadsel geven?
Bedankt,
Tim
Ik ben een site aan het maken waarbij ik een hoofdmenu en submenu's wil. Ik moet deze 2 scheiden van elkaar omdat de layout voor elk anders is.
Dit is de html code:
HTML:
<ul id="navigation" >
<li><a onClick="scrolltoElement('logo')" style="display:inline; white-space:nowrap;">Partij voor de jongeren Vrijheid</a>
</li>
<li><a onClick="scrolltoElement('informatie')" style="display:inline; white-space:nowrap;">Informatie over onze partij</a></li>
<li><a onClick="scrolltoElement('ideeën')" style="white-space:nowrap;">Onze ideeën</a><ul id="submenu"><li><a onClick="scrolltoElement('algemeneveranderingen')"style="display:inline; white-space:nowrap;">Algemene Veranderingen</a></li>
<li><a onClick="scrolltoElement('onderwijsveranderingen')"style="white-space:nowrap;">Veranderingen in het onderwijs</a></li>
<li><a onClick="scrolltoElement('recreatieensporten')"style="display:inline; white-space:nowrap;">Algemene Veranderingen</a></li></ul></li>
<li><a onClick="scrolltoElement('over')" style="display:inline; white-space:nowrap;">Over ons</a></li>
</ul>Dit is de CSS code:
Code:
#navigation, #nav ul{
padding: 3px 0 0 0;
margin:0;
list-style:none;
}
#navigation{
position: fixed;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: center;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
font-family: 'eras_light_itcregular';
font-size:medium;
}
#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
cursor:pointer;
}
#submenu ul li{
top: 40px;
width: 250px;
color: #ffffff; /* #ffffff */
height: auto;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
font-family: 'eras_light_itcregular';
font-size:medium;
list-style:none;
}
#navigation li{
float:left;
width:250px;
display:inline;
}
#submenu li:hover ul{
left:auto;
background-position:0 0;
}
#navigation ul{
top: 40px;
width: 250px;
color: #ffffff; /* #ffffff */
height: auto;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
font-family: 'eras_light_itcregular';
font-size:medium;
list-style:none;
}
#navigation li:hover ul, #navigation li.ie_does_hover ul{
left:auto;
float:middle;
background-position: 0 0;
}
#submenu li:hover ul, #submenu li.ie_does_hover ul{
left:auto;
float:middle;
background-position: 0 0;
}
#navigation ul{
padding:0;
maring:0;
width:250px;
list-style:none;
left: -2000px;
text-align:left;
float:middle;
position:absolute;
}Wat er nu gebeurd als ik over de hoofdmenu's hover, is dat de submenu's te voorschijn komen. Alleen als ik naar een submenu probeer te gaan, verdwijnen deze weer. Kan iemand mij de oplossing tot dit raadsel geven?
Bedankt,
Tim
