Pure CSS Drop Down Menu Navigation - Add a pure CSS drop down navigation menu to your web page. Compatible Browsers: Example: View Code Demo |
<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Pure CSS Drop Down Menu Navigation</title>
<style>
/* Begin Pure CSS Drop Down Menu Navigation */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The https://snapbuilder.com Free Public Codes Library == */
/* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */
/* Created by: Mozilla Developer Network : https://developer.mozilla.org/ : Creative Commons License == */
BODY {font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000;}
#content {
margin:0px 15px 0px 15px; padding:15px 15px 15px 15px;
}
div.menu-bar {
position:relative;
margin:0;
padding:0;
/* menu header width and height */
height:30px;
width:90%;
}
/* horizontal menu */
div.menu-bar ul {
margin:0;
padding:0;
position:absolute;
height:100%;
width:100%;
list-style-type:none;
background-color:#fffabf;
overflow:visible;
}
div.menu-bar ul li {
display:block;
float:left;
height:auto;
/* menu header's items width */
width:120px;
}
div.menu-bar li > span, div.menu-bar li > a, div.menu-bar li > a:link,
div.menu-bar li > a:visited, div.menu-bar li > a:active {
display:block;
padding:0 0 0 10px;
height:100%;
width:109px;
border-right:1px #5d5636 solid;
line-height:30px;
font-family:times, serif;
font-size:17px;
font-style:italic;
text-decoration:none;
background-color:#fffabf;
color:#5d5636;
cursor:pointer;
}
div.menu-bar li:hover > span, div.menu-bar li:hover > a {
color:#220000;
background-color:#eeeabe;
}
/* vertical sub-menus */
div.menu-bar ul ul {
margin-top:2px;
display:none;
position:static;
height:auto;
/* vertical-menus width */
width:160px;
border:1px #666666 solid;
background-color:#dddddd;
}
div.menu-bar li:hover > ul {
display:block;
}
div.menu-bar ul ul li {
position:relative;
float:none;
display:block;
height:28px;
width:100%;
border:none;
}
div.menu-bar ul ul li > span, div.menu-bar ul ul li > a,
div.menu-bar ul ul li > a:link, div.menu-bar ul ul li > a:visited,
div.menu-bar ul ul li > a:active {
height:100%;
width:96%;
padding:0 0 0 4%;
line-height:28px;
background-color:transparent;
border:none;
color:#000000;
font-family:georgia, serif;
font-size:11px;
font-style:normal;
}
div.menu-bar ul ul li:hover > span, div.menu-bar ul ul li:hover > a {
background-color:#cccccc;
color:#ff0000;
}
/* vertical sub-sub-menus */
div.menu-bar ul ul ul {
/* sub-sub-menu position is relative to its parent */
position:absolute;
top:4px;
left:155px;
margin:0;
}
/* an arrow on the right side of menu's folders */
span.menu-nav:after, a.menu-nav:after {
content:"\00BB";
float:right;
margin-right:8px;
}
</style>
</head>
<body>
<div id="content">
<h3>Pure CSS Drop Down Menu Navigation</h3>
<div class="menu-bar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">JavaScript</a><ul>
<li><a href="#">Link</a></li>
<li><a class="menu-nav" href="#">Submenu</a>
<ul>
<li><a class="menu-nav" href="#">Submenu</a>
<ul>
<li><span onclick="alert('!');">JavaScript function</span></li>
<li><a class="menu-nav" href="#">Submenu</a><ul>
<li><span onclick="alert('!');">JavaScript function</span></li>
<li><a class="menu-nav" href="#">Submenu</a><ul>
<li><span onclick="alert('!');">JavaScript function</span></li>
<li><a href="#">Link</a></li>
<li><span onclick="alert('!');">JavaScript function</span></li>
<li><a class="menu-nav" href="#">Submenu</a>
<ul>
<li><span onclick="alert('!');">JavaScript function</span></li>
<li><a href="#">Link</a></li>
<li><span onclick="alert('!');">JavaScript function</span></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
</ul>
</li>
<li><span onclick="alert('!');">JavaScript function</span></li>
<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>
<li><a href="#">Link</a></li>
<li><span onclick="alert('!');">JavaScript function</span></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">CSS</a>
<ul>
<li><a class="menu-nav" href="#">Submenu</a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li><span onclick="alert('!');">JavaScript function</span></li>
<li><a class="menu-nav" href="#">Submenu</a>
<ul>
<li><span onclick="alert('!');">JavaScript function</span></li>
<li><span onclick="alert('!');">JavaScript function</span></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li><span>Documents</span><ul>
<li><a class="menu-nav" href="#">Submenu</a><ul>
<li><span onclick="alert('!');">JavaScript function</span></li>
<li><a href="#">Link</a></li>
<li><span onclick="alert('!');">JavaScript function</span></li>
<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>
<li><a class="menu-nav" href="#">Submenu</a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><span onclick="alert('!');">JavaScript function</span></li>
</ul>
</li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li><a href="#">About Us</a><ul>
<li><span onclick="alert('!');">JavaScript function</span></li>
</ul>
</li>
</ul>
</div>
<p><br /><br /></p>
<p>[ Page content goes here ]</p>
<br /><br /><br /><br /><br />
<p>
[ This code example from <a href="http://snapbuilder.com/code_snippets/snippet.php?sid=183">Pure CSS Drop Down Menu Navigation Code Snippet</a> page. ]
</p>
</div>
</body>
</html>
|
Scroll