Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Menus & Navigation >> Pure CSS Drop Down Menu Navigation


Code Snippet </> Info


Snippet Name: Pure CSS Drop Down Menu Navigation

Description: Add a pure CSS drop down navigation menu to your web page.
Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser

Example: View Code Demo

Note:

Author: Mozilla Developer Network

Last Modified: 2014-05-25 07:28:46

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!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 http://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>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library