Horizontaal CSS voorbeeld Drop down menu
Terug naar Voorbeelden pagina
HTML Code
<div id="wrapper">
<ul id="level-one">
<li><a href="../">First</a></li>
<li>Second
<ul id="level-two">
<li><a href="#">sub_Second</a></li>
<li><a href="#">sub-Second</a></li>
</ul>
</li>
<li>Third
<ul id="level-three">
<li><a href="#">sub_Second</a></li>
<li><a href="#">sub-Second</a></li>
</ul>
</li>
<li>Fourth
<ul id="level-four">
<li><a href="#">sub_Second</a></li>
<li><a href="#">sub-Second</a></li>
</ul>
</li>
<li><a href="#">Fifth</a></li>
</ul>
</div>
CSS Code
#wrapper{
clear:both;
margin:5px auto;
border:0px solid #000;
}
ul#level-one{
width:93%;
height: 36px;
position: relative;
list-style: none;
line-height:36px;
color: #000;
background-color: transparent;
background:#f0f0f0 url("images/menu-back.png") repeat-x bottom left;/* for non-css3 browsers */
background: linear-gradient(to top, #FFFFFF 0%, silver 100%);
}
ul#level-one li{
width:80px;
float: left;
font-weight: bold;
padding-left: 12px;
}
ul#level-one li:hover{
color:#000;
background-color:#FFA500;
}
ul#level-two,ul#level-three,ul#level-four{
list-style: none;
color:#000;
background:#FFA500 url(images/menu-grad.png) repeat-x bottom left; /* for non-css3 browsers */
background: linear-gradient(to top, #FFA500 0%, #FF4500 100%);
display:none;
position:absolute;
top:36px;
padding:0;
width:200px;
height:240px;
border:0px solid red;
}
ul#level-two li,ul#level-three li,ul#level-four li{
width:196px;
padding-left:4px ;
line-height: 30px;
}
ul#level-two li:hover{
background:#f0f0f0 url(images/menu-li.png) repeat-x bottom left;/* for non-css3 browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#c0c0c0)); /* for webkit browsers */
background: linear-gradient(to top, #fff 0%, #c0c0c0 100%); /* for firefox 3.6+ */
}
ul#level-one li:hover > ul#level-two,ul#level-one li:hover > ul#level-three,ul#level-one li:hover > ul#level-four {
display: block;
}
a{
width:200px;
text-align: center;
text-decoration: none;
color:#000000;
}
ul#level-three li:hover{
background: #00BFFF url(images/menu-li-blue.png) repeat-x bottom left;
background: -webkit-gradient(linear, left top, left bottom, from(#00BFFF), to(#1E90FF)); /* for webkit browsers */
background: -moz-linear-gradient(top, #00BFFF, #1E90FF); /* for firefox 3.6+ */
}