Skip to content

Instantly share code, notes, and snippets.

@lobodin

lobodin/horizontal.css

Created October 15, 2010 16:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lobodin/628442 to your computer and use it in GitHub Desktop.
Save lobodin/628442 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
horizontal.css
ul.menu a {
border-bottom: 1px solid #888;
}
ul.menu > li:last-child {
border-right: 1px solid #888;
}
ul.menu > li {
float: left;
}
Raw
menu.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Popup menu example</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="horizontal.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul class="menu">
<li>
<a href="#">&#63743;</a>
<ul>
<li><a href="#">About This Mac</a></li>
<li><a href="#">Software Update&#133;</a></li>
<li><a href="#">Mac OS X Software&#133;</a></li>
<li class="separator">
<li><a href="#">System Preferences&#133;</a></li>
<li>
<a href="#">Dock&#133;</a>
<ul>
<li><a href="#">Turn Hiding On</a></li>
<li><a href="#">Turn Magnification Off</a></li>
<li class="separator">
<li><a href="#">Position On Left</a></li>
<li><a href="#">Position On Bottom</a></li>
<li><a href="#">Position On Right</a></li>
<li class="separator">
<li><a href="#">Dock Preferences&#133;</a></li>
</ul>
</li>
<li class="separator">
<li><a href="#">Recent Items</a></li>
<li class="separator">
<li><a href="#">Force Quit&#133;</a></li>
<li class="separator">
<li><a href="#">Sleep</a></li>
<li><a href="#">Restart</a></li>
<li><a href="#">Shut Down&#133;</a></li>
<li class="separator">
<li><a href="#">Log Out Pavel Lobodin&#133;</a></li>
</ul>
</li>
<li>
<a href="#">Finder</a>
<ul>
<li><a href="#">About Finder</a></li>
<li class="separator">
<li><a href="#">Preferences&#133;</a></li>
<li class="separator">
<li><a href="#">Empty Trash</a></li>
<li><a href="#">Secure Empty Trash&#133;</a></li>
<li class="separator">
<li><a href="#">Services</a></li>
<li class="separator">
<li><a href="#">Hide Finder</a></li>
<li><a href="#">Hide Others</a></li>
<li><a href="#">Show All</a></li>
</ul>
</li>
<li><a href="#">File</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">View</a></li>
<li><a href="#">Go</a></li>
<li><a href="#">Window</a></li>
<li><a href="#">Help</a></li>
</ul>
</body>
</html>
Raw
style.css
body, ul.menu ul li {
background: #E3EEFF;
}
ul {
list-style: none;
padding: 0;
margin: 0;
font-family: sans-serif;
}
ul.menu li.separator {
border-bottom: 1px solid #E2E2E2;
background: white;
}
ul.menu li {
position: relative;
white-space: nowrap;
}
ul.menu a {
display: block;
padding: 3px 10px;
border-top: 1px solid #888;
border-left: 1px solid #888;
background-color: #E2E2E2;
text-decoration: none;
color: black;
}
ul.menu li a:hover, ul.menu li:hover > a {
background: #4F61F6;
color: white;
}
ul.menu ul {
position: absolute;
display: none;
-moz-box-shadow: 0 0 3px #888;
-webkit-box-shadow: 0 0 3px #888;
box-shadow: 0 0 3px #888;
}
ul.menu ul a {
border: none;
padding-left: 20px;
padding-right: 20px;
background-color: white;
}
ul.menu > li:hover > ul, ul.menu ul li:hover ul {
display: block;
}
ul.menu ul ul {
display: none;
position: absolute;
left: 100%;
top: 0;
z-index: 100;
}
Raw
vertical.css
ul.menu {
float: left;
}
ul.menu a {
border-right: 1px solid #888;
}
ul.menu > li:last-child {
border-bottom: 1px solid #888;
}
ul.menu ul {
left: 100%;
top: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment