Creating a Marble Style CSS3 Navigation Menu

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):

Green Marble Dropdown Menu

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

01 <!DOCTYPE html>
02 <html lang="en" >
03     <head>
04         <meta charset="utf-8" />
05         <title>CSS3 Green Marble Menu | Script Tutorials</title>
06         <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
07         <link rel="stylesheet" href="css/menu.css" type="text/css" media="screen">
08     </head>
09     <body>
10         <div class="container">
11             <div class="content">
12                 <ul id="nav">
13                     <li><a href="#">Home</a></li>
14                     <li><a href="#" class="current">HTML/CSS</a>
15                         <ul class="subs">
16                             <li><a href="#">Link 1</a></li>
17                             <li><a href="#">Link 2</a></li>
18                             <li><a href="#">Link 3</a></li>
19                             <li><a href="#">Link 4</a></li>
20                         </ul>
21                     </li>
22                     <li><a href="#">jQuery/JS</a>
23                         <ul class="subs">
24                             <li><a href="#">Link 1</a></li>
25                             <li><a href="#">Link 2</a></li>
26                             <li><a href="#">Link 3</a></li>
27                             <li><a href="#">Link 4</a></li>
28                         </ul>
29                     </li>
30                     <li><a href="#">PHP</a></li>
31                     <li><a href="#">MySQL</a></li>
32                     <li><a href="#">XSLT</a></li>
33                 </ul>
34             </div>
35         </div>
36         <footer>
37             <h2>CSS3 Green Marble Menu</h2>
38             <a href="https://www.script-tutorials.com/css3-green-marble-menu/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
39         </footer>
40     </body>
41 </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

01 ul#nav {
02     color#232223;
03     display:block;
04     float:right;
05     font16px/26px Georgia,"Times New Roman",Times,serif;
06 }
07 ul#nav,ul#nav ul {
08     list-style:none;
09 }
10 ul#nav .subs {
11     background-color: rgba(121,160,160,0.8);
12     border:1px solid #887963;
13     display:none;
14     float:left;
15     left:0;
16     padding:10px;
17     position:absolute;
18     top:100%;
19 }
20 ul#nav li:hover>* {
21     display:block;
22 }
23 ul#nav li:hover {
24     position:relative;
25 }
26 ul#nav ul .subs {
27     left:100%;
28     position:absolute;
29     top:0;
30 }
31 ul#nav ul {
32     padding:0 5px 5px;
33 }
34 ul#nav li {
35     display:inline;
36     float:left;
37 }
38 ul#nav a {
39     color#353435;
40     floatleft;
41     font-size15px;
42     letter-spacing1px;
43     line-height14px;
44     min-width:60px;
45     padding60px 20px;
46     text-aligncenter;
47     text-decorationnone;
48     text-shadow1px 1px 0 #B4C6C6;
49     text-transformuppercase;
50 }
51 ul#nav > li:hover > a {
52     border-top5px solid #887963;
53     color#1e1e1e;
54     padding-top55px;
55 }
56 ul#nav li a.current, ul#nav li a.current:hover {
57     backgroundurl("../images/nav_current.png"no-repeat scroll center top transparent;
58     bordermedium none;
59     color#fff;
60     padding-top60px;
61     text-shadownone;
62 }
63 ul#nav ul a {
64     color:#000;
65     font-size:12px;
66     font-weight:bold;
67     padding:5px;
68     text-shadow:#fff 0 0 0;
69     border-radius:0;
70     -moz-border-radius:0;
71     -webkit-border-radius:0;
72 }
73 ul#nav ul li:hover>a {
74     letter-spacing:2px;
75 }

Live Demo

Conclusion

Hope you enjoyed with new menu, don’t forget to tell thanks and leave a comment 🙂 Good luck!