Pure CSS Drop Down Menu 1
Pure CSS Drop Down Menu 1
Here is a method I came up with for a pure CSS drop down menu. To gain insight on why I used the various CSS properties I applied one has to research the CSS properties and selectors.
Add the following code to a new blank HTML document and experiment with it.
Add the following code to a new blank HTML document and experiment with it.
CSS CODE EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>Pure CSS Drop Down Menu 1</title>
<style type="text/css">
#myMenu {
height:20px;
border:#999 1px dashed;
width: 500px;
font-family: Arial, Helvetica, sans-serif;
font-size:16px;
}
#myMenu div {
float:left;
margin-right: 20px;
}
#myMenu div ul {
display: none;
position: absolute;
list-style-type:none;
background-color: #999;
border: #666;
top: 85px;
padding: 0px;
}
#myMenu div:hover ul {
display: block;
font-size:12px;
}
#myMenu div ul li a {
display: block;
width: 120px;
background: #F0F0F0;
margin: 1px;
padding: 4px;
text-decoration: none;
color:#000;
}
#myMenu div ul li a:hover {
background: #FFEFB7;
color:#960;
}
</style>
</head>
<body>
<h1>My Web Document</h1>
<div id="myMenu">
<div>
<a href="#">Home</a>
</div>
<div>
<a href="#">Services</a>
<ul>
<li><a href="#">Face Punching</a></li>
<li><a href="#">Teeth Kicking</a></li>
<li><a href="#">Butt Munching</a></li>
</ul>
</div>
<div>
<a href="#">Locations</a>
<ul>
<li><a href="#">New York</a></li>
<li><a href="#">Chicago</a></li>
</ul>
</div>
</div>
<p>And here my document content continues down the page ...</p>
</body>
</html>
<html>
<head>
<title>Pure CSS Drop Down Menu 1</title>
<style type="text/css">
#myMenu {
height:20px;
border:#999 1px dashed;
width: 500px;
font-family: Arial, Helvetica, sans-serif;
font-size:16px;
}
#myMenu div {
float:left;
margin-right: 20px;
}
#myMenu div ul {
display: none;
position: absolute;
list-style-type:none;
background-color: #999;
border: #666;
top: 85px;
padding: 0px;
}
#myMenu div:hover ul {
display: block;
font-size:12px;
}
#myMenu div ul li a {
display: block;
width: 120px;
background: #F0F0F0;
margin: 1px;
padding: 4px;
text-decoration: none;
color:#000;
}
#myMenu div ul li a:hover {
background: #FFEFB7;
color:#960;
}
</style>
</head>
<body>
<h1>My Web Document</h1>
<div id="myMenu">
<div>
<a href="#">Home</a>
</div>
<div>
<a href="#">Services</a>
<ul>
<li><a href="#">Face Punching</a></li>
<li><a href="#">Teeth Kicking</a></li>
<li><a href="#">Butt Munching</a></li>
</ul>
</div>
<div>
<a href="#">Locations</a>
<ul>
<li><a href="#">New York</a></li>
<li><a href="#">Chicago</a></li>
</ul>
</div>
</div>
<p>And here my document content continues down the page ...</p>
</body>
</html>
0 Response to "Pure CSS Drop Down Menu 1"
Post a Comment