Written by 
CSS3 Green Marble Menu
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
download in package
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="http://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
download in package
Conclusion
Hope you enjoyed with new menu, don’t forget to tell thanks and leave a comment 
Good luck!
| I am web developer with huge experience (in web languages and even in system languages). Also I am the founder of current website (and several another). I like to write blogs about web development/design. Feel free to Follow us on Twitter: tweetmeme_screen_name='AramisGC'; | If you Enjoyed our article don't forget to Share the love with your friends. |
