Skip to content

Instantly share code, notes, and snippets.

@lamprosg

lamprosg/horizontal.html

Created April 21, 2012 19:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save lamprosg/2439147 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save lamprosg/2439147 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Horizontal Menu
Raw
horizontal.html
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Horizontal drop menu</title>
<style type="text/css">
.menu {
padding: 0;
margin: 0;
height:25px;
width:600px; /* 5 times the Menu link width */
background-color:#eeeeee;
text-align:center;
}
.menu ul {
position:relative;
list-style: none;
margin: 0;
padding: 0;
float:left; /* Key for horizontal */
font-size:medium;
}
.menu ul li { /* Menu link styling */
display:block;
background-color:#cccccc;
height:21px;
}
.menu ul ul{ /* Drop down styling */
width:120px;
padding:0;
font-size:small;
top: 1px;
visibility:hidden; /* Hide it */
background-color:#eeeeee;
}
.menu ul ul li{ /* Drop down actual content */
position:relative;
height: 25px;
color:#333;
top: 2px;
}
.menu ul li:hover ul { visibility:visible; } /* Show drop down content when hovering a menu link */
.menu li a{
display: block;
text-decoration:none;
color: #444444;
text-align:left;
}
.menu li a:visited {text-decoration: none; color: #444444;}
.menu li a:active {text-decoration: none; color: #00688B;}
.menu li a:hover {text-decoration: none; color: #00688B;}
</style>
</head>
<body>
<br /><br />
<!--- Drop Down Menu---->
<div class="menu">
<ul>
<li><a href="#">Option 1</a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Option 2</a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Option 3</a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Option 4</a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Option 5</a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment