teh_NiHiLiM
Legacy Member
Ik ben (na lange tijd) nog eens een website aan't ineensteken.
nu bij het design heb'k toch een CSS probleempje
ik probeer mijn navigatie in puur CSS te doen,
so far so good, zij het niet dat mijn sub-navigatie niet altijd aan te klikken valt.
een voorbeeldje zal wel pakken duidelijker zijn:
http://freya.groept.be/~nico/navbar/navbar.html
zoals je kan zien is het nogal moeilijk om link 41 aan te klikken (onder Links 4)
relevant HTML gedeelte:
Bijhorende CSS code:
( http://freya.groept.be/~nico/navbar/style1.css )
kan iemand me op weg helpen om dit op te lossen?
dank bij voorbaat
nu bij het design heb'k toch een CSS probleempje
ik probeer mijn navigatie in puur CSS te doen,
so far so good, zij het niet dat mijn sub-navigatie niet altijd aan te klikken valt.
een voorbeeldje zal wel pakken duidelijker zijn:
http://freya.groept.be/~nico/navbar/navbar.html
zoals je kan zien is het nogal moeilijk om link 41 aan te klikken (onder Links 4)
relevant HTML gedeelte:
Code:
<ul id="navbar">
<li><a href="#">Link 1</a></li>
<li><a href="#">Links 2</a>
<ul>
<li><a href="#">Link 21</a></li>
<li><a href="#">Link 22</a></li>
<li><a href="#">Link 23</a></li>
</ul>
</li>
<li><a href="#">Links 3</a>
<ul>
<li><a href="#">Link 31</a></li>
<li><a href="#">Link 32</a></li>
<li><a href="#">Link 33</a></li>
<li><a href="#">Link 34</a></li>
<li><a href="#">Link 35</a></li>
</ul>
</li>
<li><a href="#">Links 4</a>
<ul>
<li><a href="#">Link 41</a></li>
</ul>
</li>
<li><a href="#">Link 5</a></li>
</ul>Bijhorende CSS code:
Code:
#navbar {
position: absolute;
top: 40px;
}
#navbar li {
width: 100px;
height: 22px;
padding-top: 78px;
float: left;
text-align: center;
}
#navbar li:hover {
background-image: url(images/topbtnbg.png);
background-repeat: repeat-x;
background-position:bottom;
}
#navbar li ul {
position: absolute;
visibility: hidden;
top: 100px;
left: 0px;
width:auto;
}
#navbar li:hover ul {
visibility:visible;
}
#navbar li ul li {
float: left;
height: 30px;
padding-top: 15px;
border: none;
}
#navbar li ul li:hover {
background-image: none;
background-color: #2288bb;
}kan iemand me op weg helpen om dit op te lossen?
dank bij voorbaat
.