Andrey Prikaznov 
Creating a Multilevel CSS3 Metal Navigation with icons
Email
The HTML5 Microzone is presented by DZone and Microsoft to bring you the most interesting and relevant content on emerging web standards. Experience all that the HTML5 Microzone has to offer on our homepage and check out the cutting edge web development tutorials on Script Junkie, Build My Pinned Site, and the HTML5 DevCenter.
In our new tutorial we’ll create a beautiful CSS3 menu with icons in metal style. This is a pretty standard UL-LI multilevel menu.
Here are final result (what we will creating):
Here are samples and downloadable package:
Live Demodownload in packageOk, 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. As you can see – this is multilevel menu. Whole menu built on UL-LI elements.
index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>CSS3 Metal menu with icons | 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">
<ul id="nav">
<li><a href="#"><img src="images/home.png" /> Home</a></li>
<li><a href="#"><span><img src="images/top1.png" /> HTML/CSS</span></a>
<div class="subs">
<div class="col">
<ul>
<li><a href="#"><img src="images/bub.png" /> Link 1</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 2</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 3</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 4</a></li>
<li><a href="#"><span><img src="images/top3.png" /> Sublinks</span></a>
<div class="subs">
<div class="col">
<ul>
<li><a href="#"><img src="images/bub.png" /> Link 41</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 42</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 43</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 44</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 45</a></li>
</ul>
</div>
<div class="col">
<ul>
<li><a href="#"><img src="images/bub.png" /> Link 46</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 47</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 48</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 49</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="col">
<ul>
<li><a href="#"><img src="images/bub.png" /> Link 6</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 7</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 8</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 9</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 10</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#"><span><img src="images/top2.png" /> jQuery/JS</span></a>
<div class="subs">
<div class="col">
<ul>
<li><a href="#"><img src="images/bub.png" /> Link 1</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 2</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 3</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 4</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 5</a></li>
</ul>
</div>
<div class="col">
<ul>
<li><a href="#"><img src="images/bub.png" /> Link 6</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 7</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 8</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 9</a></li>
<li><a href="#"><img src="images/bub.png" /> Link 10</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#"><img src="images/top3.png" /> PHP</a></li>
<li><a href="#"><img src="images/top4.png" /> MySQL</a></li>
<li><a href="#"><img src="images/top5.png" /> XSLT</a></li>
</ul>
</div>
<footer>
<h2>CSS3 Metal menu with icons</h2>
<a href="http://www.script-tutorials.com/css3-metal-menu-with-icons" 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 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.cssul#nav {
display:block;
float:left;
font-family:Trebuchet MS,sans-serif;
font-size:0;
padding:5px 5px 5px 0;
background: -moz-linear-gradient(#f5f5f5, #c4c4c4); /* FF 3.6+ */
background: -ms-linear-gradient(#f5f5f5, #c4c4c4); /* IE10 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #c4c4c4)); /* Safari 4+, Chrome 2+ */
background: -webkit-linear-gradient(#f5f5f5, #c4c4c4); /* Safari 5.1+, Chrome 10+ */
background: -o-linear-gradient(#f5f5f5, #c4c4c4); /* Opera 11.10 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4')"; /* IE8+ */
background: linear-gradient(#f5f5f5, #c4c4c4); /* the standard */
}
ul#nav,ul#nav ul {
list-style:none;
margin:0;
}
ul#nav,ul#nav .subs {
background-color:#444;
border:1px solid #454545;
border-radius:9px;
-moz-border-radius:9px;
-webkit-border-radius:9px;
}
ul#nav .subs {
background-color:#fff;
border:2px solid #222;
display:none;
float:left;
left:0;
padding:0 6px 6px;
position:absolute;
top:100%;
width:300px;
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
}
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 .col {
float:left;
width:50%;
}
ul#nav li {
display:block;
float:left;
font-size:0;
white-space:nowrap;
}
ul#nav>li,ul#nav li {
margin:0 0 0 5px;
}
ul#nav ul>li {
margin:5px 0 0;
}
ul#nav a:active,ul#nav a:focus {
outline-style:none;
}
ul#nav a {
border-style:none;
border-width:0;
color:#181818;
cursor:pointer;
display:block;
font-size:13px;
font-weight:bold;
padding:8px 18px;
text-align:left;
text-decoration:none;
text-shadow:#fff 0 1px 1px;
vertical-align:middle;
}
ul#nav ul li {
float:none;
margin:6px 0 0;
}
ul#nav ul a {
background-color:#fff;
border-color:#efefef;
border-style:solid;
border-width:0 0 1px;
color:#000;
font-size:11px;
padding:4px;
text-align:left;
text-decoration:none;
text-shadow:#fff 0 0 0;
border-radius:0;
-moz-border-radius:0;
-webkit-border-radius:0;
}
ul#nav li:hover>a {
border-style:none;
color:#fff;
font-size:13px;
font-weight:bold;
text-decoration:none;
text-shadow:#181818 0 1px 1px;
}
ul#nav img {
border:none;
margin-right:8px;
vertical-align:middle;
}
ul#nav span {
background-position:right center;
background-repeat:no-repeat;
display:block;
overflow:visible;
padding-right:0;
}
ul#nav ul span {
background-image:url("../images/arrow.png");
padding-right:20px;
}
ul#nav ul li:hover>a {
border-color:#444;
border-style:solid;
color:#444;
font-size:11px;
text-decoration:none;
text-shadow:#fff 0 0 0;
}
ul#nav > li >a {
background-color:transpa;
height:25px;
line-height:25px;
border-radius:11px;
-moz-border-radius:11px;
-webkit-border-radius:11px;
}
ul#nav > li:hover > a {
background-color:#313638;
line-height:25px;
}
Live Demodownload in packageConclusion
Hope you enjoyed with new menu, don’t forget to tell thanks and leave a comment 
Good luck!
From http://www.script-tutorials.com/css3-metal-menu-with-icons/
Tags:
Published at DZone with permission of its author, Andrey Prikaznov.(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)
HTML5 is the most dramatic step in the evolution of web standards. It incorporates features such as geolocation, video playback and drag-and-drop. HTML5 allows developers to create rich internet applications without the need for third party APIs and browser plug-ins. Under the banner of HTML5, modern web standards such as CSS3, SVG, XHR2, WebSockets, IndexedDB, and AppCache are pushing the boundaries for what a browser can achieve using web standards. This Microzone is supported by Microsoft, and it will delve into the intricacies of using these new web technologies and teach you how to make your websites compatible with all of the modern browsers.
