How to create a drop-down menu with HTML/CSS - example 4
If you like the below menu:
Then copy-and-paste the below CSS code:
ul.menu li {
float: left;
line-height: 1.0em;
vertical-align: middle;
}
ul.menu,
ul.menu li,
ul.menu ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.menu {
position: relative;
z-index: 1000;
float: left;
}
ul.menu li.hover,
ul.menu li:hover {
position: relative;
z-index: 1002;
cursor: default;
}
ul.menu ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 1001;
width: 100%;
}
ul.menu ul li {
float: none;
}
ul.menu li:hover > ul {
visibility: visible;
}
ul.menu {
font: bold 12px Verdana, sans-serif;
}
ul.menu li.hover,
ul.menu li:hover {
background-color: #cc0000;
}
ul.menu a:link,
ul.menu a:visited {
color: #000000;
text-decoration: none;
}
ul.menu a:active {
color: #000000;
}
ul.menu ul {
margin-left: -6px;
padding-bottom: 11px;
width: 170px;
background: url(images/img_01.png) 0 100% no-repeat;
font-size: 10px;
font-weight: normal;
}
ul.menu ul li.hover,
ul.menu ul li:hover {
background-color: transparent;
}
ul.menu ul li {
background-color: transparent;
color: #000000;
}
ul.menu ul li.empty {
padding: 15px 15px 9px;
font-weight: normal;
}
ul.menu ul a:link,
ul.menu ul a:visited {
color: #cc3300;
}
ul.menu ul a:hover {
color: #cc0000;
text-decoration: none;
}
ul.menu ul a:active {
color: #000000;
}
ul.menu li a {
display: block;
padding: 5px 10px;
}
ul.menu ul a:hover {
padding: 3px 5px 3px 11px;
border: solid 1px #cc0000;
background-color: #232323;
font-weight: bold;
}In addition, you can test it from HTML, like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CSS DropDown Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="menu.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="nav" class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Racquets</a>
<ul>
<li><a href="#">Wilson BLX Pro Open</a></li>
...
<li><a href="#">Wilson K Factor KBlade 98</a></li>
</ul>
</li>
<li><a href="#">Strings</a>
<ul>
<li><a href="#">MSV Hepta Twist</a></li>
...
<li><a href="#">MSV Spin Plus</a></li>
</ul>
</li>
<li><a href="#">Stringing</a>
<ul>
<li><a href="#">M90-O92-TH flying</a></li>
<li><a href="#">M90-O92-T98 fixed</a></li>
</ul>
</li>
<li><a href="#">Grips</a>
<ul>
<li><a href="#">Wilson K Grip</a></li>
...
<li><a href="#">Wilson Micro-Dry Feel</a></li>
</ul>
</li>
</ul>
</body>
</html>The used image is:
img_01
No comments:
Post a Comment