CSS3 Green Marble Menu tutorial. In our new tutorial we’ll create a new horizontal dropdown CSS3 menu. This menu will be suitable for black and for white websites. It made of green marble colors.
Here are final result (what we will creating):
Here are samples and downloadable package:
Live Demo
[sociallocker]
download in package
[/sociallocker]
OK, download the example files and lets start coding !
Step 1. HTML
As usual, we start with the HTML. Here are full html code of our menu. Today – this is 2 levels menu. Whole menu built on UL-LI elements.
index.html
<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <title>CSS3 Green Marble Menu | Script Tutorials</title> <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/menu.css" type="text/css" media="screen"> </head> <body> <div class="container"> <div class="content"> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#" class="current">HTML/CSS</a> <ul class="subs"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </li> <li><a href="#">jQuery/JS</a> <ul class="subs"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </li> <li><a href="#">PHP</a></li> <li><a href="#">MySQL</a></li> <li><a href="#">XSLT</a></li> </ul> </div> </div> <footer> <h2>CSS3 Green Marble Menu</h2> <a href="https://www.script-tutorials.com/css3-green-marble-menu/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a> </footer> </body> </html>
Step 2. CSS
Here are the CSS styles of our dropdown menu. Maybe you’ve noticed – that in our html – I have two CSS files: layout.css and menu.css. The first file (layout.css) contain the styles of our test page. We will not publish these styles in this article, but if you wish – you can find these styles in the package.
css/menu.css
ul#nav { color: #232223; display:block; float:right; font: 16px/26px Georgia,"Times New Roman",Times,serif; } ul#nav,ul#nav ul { list-style:none; } ul#nav .subs { background-color: rgba(121,160,160,0.8); border:1px solid #887963; display:none; float:left; left:0; padding:10px; position:absolute; top:100%; } ul#nav li:hover>* { display:block; } ul#nav li:hover { position:relative; } ul#nav ul .subs { left:100%; position:absolute; top:0; } ul#nav ul { padding:0 5px 5px; } ul#nav li { display:inline; float:left; } ul#nav a { color: #353435; float: left; font-size: 15px; letter-spacing: 1px; line-height: 14px; min-width:60px; padding: 60px 20px; text-align: center; text-decoration: none; text-shadow: 1px 1px 0 #B4C6C6; text-transform: uppercase; } ul#nav > li:hover > a { border-top: 5px solid #887963; color: #1e1e1e; padding-top: 55px; } ul#nav li a.current, ul#nav li a.current:hover { background: url("../images/nav_current.png") no-repeat scroll center top transparent; border: medium none; color: #fff; padding-top: 60px; text-shadow: none; } ul#nav ul a { color:#000; font-size:12px; font-weight:bold; padding:5px; text-shadow:#fff 0 0 0; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; } ul#nav ul li:hover>a { letter-spacing:2px; }
Live Demo
Conclusion
Hope you enjoyed with new menu, don’t forget to tell thanks and leave a comment :) Good luck!
This menu is fantastic, thanks for sharing.
these images and drop down effect is very cool thx for sharing.
Whenever I try using this nice script, the menu is vertical not horizontal… Not sure why :S Any ideas why I cannot get it horizontal and just vertical?
Hi Abi,
One of the reasons for this may be the fact that you have not connected the css file