CSS Simple drop down menu 1

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;
	font-size:12px;
	font-family: verdana;
}

ul#level-one{
	width:93%;
	height: 36px;
	position: relative;
	list-style: none;
	line-height:36px;
	background:#f0f0f0 url("images/menu-back.png") repeat-x bottom left;/* for non-css3 browsers */
	background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#f0f0f0)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #FFFFFF,  #f0f0f0); /* for firefox 3.6+ */ 
}

ul#level-one li{
	width:80px;
	float: left;
	font-weight: bold;
	font-family: Arial;
	padding-left: 12px;
}

ul#level-one li:hover{
	background:#FFA500;
}

ul#level-two,ul#level-three,ul#level-four{
	list-style: none;
	background:#FFA500 url(images/menu-grad.png) repeat-x bottom left; /* for non-css3 browsers */
	background: -webkit-gradient(linear, left top, left bottom, from(#FFA500), to(#FF4500)); /* for webkit browsers */
	background: -moz-linear-gradient(top, #FFA500, #FF4500); /* for firefox 3.6+ */ 
	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: -moz-linear-gradient(top,  #fff,  #c0c0c0); /* 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+ */ 
}

Terug naar Voorbeelden pagina