Webprofis is een Forum waarin je vragen kunt stellen die webgerelateerd zijn. Heb je vragen over of problemen met je Webpagina, HTML, CSS, Javascript, PHP of andere client of serverside scriptingtalen? Stel ze dan gerust op dit forum. Op dit forum zijn een aantal vrijwilligers actief die u graag met uw vragen willen helpen en u waar mogelijk een passend antwoord aanbieden. Hebt u zelf veel ervaring en kennis met betrekking tot het bovenstaande? U bent van harte welkom om uw kennis met anderen te delen!

We hopen dat eenieder op dit Forum een leerzame ervaring mag opdoen.

Team Webprofis

Dropdown menu (CSS only)

bewerkt zo 8 mrt 2015 in Tutorials & Scripten Posts: 879







HTML:

<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Informatie</a>
<ul>
<li><a href="#">Mogelijkheden</a></li>
<li><a href="#">submenu</a>
<ul>
<li><a href="#">geen submenu</a></li>
<li><a href="#">geen submenu</a></li>
<li><a href="#">wel een submenu</a>
<ul>
<li><a href="#">een submenu</a></li>
</ul>
</li>
<li><a href="#">geen submenu</a></li>
</ul>
</li>
<li><a href="#">Prijzen</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="#">Websites</a></li>
<li><a href="#">Banners</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>

CSS:

.menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.menu > ul > li {
float: left;
}
.menu ul li ul {
position: absolute;
display: none;
width: 140px;
margin: 0;
}
.menu ul li:hover ul {
display: block;
}
.menu ul li ul li {
display: block;
position: relative;
}
.menu ul li:hover ul ul {
display: none;
}
.menu ul li ul li:hover>ul {
display: block;
}
.menu ul li ul li ul {
display: none;
position: absolute;
top: 0px;
left: 140px;
width: 140px;
}

.menu ul li a{
display: block;
text-decoration: none;
padding: 7px 14px;
border-style: solid;
border-width: 1px 1px 0 0;
}

/* kleuren */

.menu ul li a, .menu ul li:hover ul li a:hover {
background: #222;
}
.menu ul li:hover ul li, .menu ul li:hover a {
background: #555;
}
.menu ul li a {
border-color: #fff;
color: #fff;
}
Dit Topic is gesloten.