Home » Tutorials

Creating a CSS3 Dropdown Menu #2

Tutorials
Author Reading 13 min Views 784 Published by Modified by

CSS3 Dropdown Menu #2 tutorial. This is our second drop down menu. Today it is in the green palette. The menu will include a submenus that will slide when we hovering the parent elements. That menu will good for green palette templates. And of course – no any JS – only pure CSS. Since this menu is made using CSS3 – it renders perfect on Firefox, Chrome and Safari browsers (possible last Opera will support it too). And, as I read, transitions have been billed to be included in IE10.

 

Here are final result (what we will creating):

css3 menu2

Here are samples and downloadable package:

Contents
  1. Step 1. HTML
  2. index.html
  3. Step 2. CSS
  4. css/style.css
  5. Step 3. Images
  6. Conclusion
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 html with our menu.

index.html

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
03 <head>
04     <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
05     <title>CSS3 drop down menu #2</title>
06 </head>
07 <body>
08     <div class="example">
09         <ul id="nav">
10             <li><a href="https://www.script-tutorials.com/">Home</a></li>
11             <li><a href="https://www.script-tutorials.com/">Tutorials</a>
12                 <div>
13                     <ul>
14                         <li><a href="https://www.script-tutorials.com/category/html-css/">HTML / CSS</a></li>
15                         <li><a href="https://www.script-tutorials.com/category/jquery/">JS / jQuery</a></li>
16                         <li><a href="https://www.script-tutorials.com/category/php/">PHP</a></li>
17                         <li><a href="https://www.script-tutorials.com/category/mysql/">MySQL</a></li>
18                         <li><a href="https://www.script-tutorials.com/category/xslt/">XSLT</a></li>
19                         <li><a href="https://www.script-tutorials.com/category/ajax/">Ajax</a></li>
20                     </ul>
21                 </div>
22             </li>
23             <li><a href="https://www.script-tutorials.com/category/resources/">Resources</a>
24                 <div>
25                     <ul>
26                         <li><a href="https://www.script-tutorials.com/category/php/">PHP</a></li>
27                         <li><a href="https://www.script-tutorials.com/category/mysql/">MySQL</a></li>
28                         <li><a href="https://www.script-tutorials.com/category/xslt/">XSLT</a></li>
29                         <li><a href="https://www.script-tutorials.com/category/ajax/">Ajax</a></li>
30                     </ul>
31                 </div>
32             </li>
33             <li><a href="https://www.script-tutorials.com/category/resources/">Other pages</a>
34                 <div>
35                     <ul>
36                         <li><a href="#">Page 1</a></li>
37                         <li><a href="#">Page 2</a></li>
38                         <li><a href="#">Page 3</a></li>
39                         <li><a href="#">Page 4</a></li>
40                         <li><a href="#">Page 5</a></li>
41                     </ul>
42                 </div>
43             </li>
44             <li><a href="https://www.script-tutorials.com/about/">About</a></li>
45             <li><a href="https://www.script-tutorials.com/xxxxxxxxxxx/">Go Back To The Tutorial</a></li>
46             <li class="pad"></li>
47         </ul>
48     </div>
49 </body>
50 </html>

Step 2. CSS

Here are used CSS styles. First two selectors (you can skip it) belong to our demo page. All rest – belong to menu.

css/style.css

001 /* demo page styles */
002 body {
003     background:#eee;
004     margin:0;
005     padding:0;
006 }
007 .example {
008     position:relative;
009     background:#fff url(../images/background.jpg);
010     width:670px;
011     height:470px;
012     border:1px #000 solid;
013     margin:20px auto;
014     padding:15px;
015     border-radius:3px;
016     -moz-border-radius:3px;
017     -webkit-border-radius:3px;
018 }
019 /* main menu styles */
020 #nav,#nav ul {
021         font-family:verdana;
022         list-style:none;
023         margin:0;
024         padding:0;
025         position:relative;
026 }
027 #nav {
028         height:50px;
029         left:0;
030         overflow:hidden;
031         top:0;
032 }
033 #nav li {
034         float:left;
035         position:relative;
036         z-index:10;
037 }
038 #nav li a {
039         background:url(../images/bg-menu.png) no-repeat center top;
040         color:#fff;
041         display:block;
042         float:left;
043         font-size:14px;
044         height:51px;
045         line-height:40px;
046         padding:0 10px;
047         position:relative;
048         text-decoration:none;
049         z-index:20;
050 }
051 #nav li:first-child a {
052         background:url(../images/bg-menu.png) no-repeat left top;
053         padding-left:35px;
054 }
055 #nav li ul li:first-child a {
056         background-image:none;
057         padding-left:10px;
058 }
059 #nav li.pad {
060         background:url(../images/bg-menu.png) no-repeat right top;
061         display:block;
062         height:51px;
063         width:35px;
064 }
065 #nav ul {
066         background:#009900;
067         height:auto;
068         padding:10px 0;
069         position:absolute;
070         top:-115px;
071         width:180px;
072         z-index:1;
073         border-radius:8px; /*some css3*/
074         -moz-border-radius:8px;
075         -webkit-border-radius:8px;
076         transition:0.8s ease-in-out;
077         box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
078         -moz-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
079         -webkit-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
080         -moz-transition:0.8s ease-in-out;
081         -o-transition:0.8s ease-in-out;
082         -webkit-transition:all 0.8s ease-in-out;
083 }
084 #nav ul li {
085         width:180px;
086 }
087 #nav ul li a {
088         background:transparent;
089         height:20px;
090         line-height:20px;
091         width:160px;
092 }
093 #nav:hover {
094         height:200px;
095 }
096 #nav li:hover ul {
097         -moz-transform:translate(0,161px); /*some css3*/
098         -o-transform:translate(0,161px);
099         -webkit-transform:translate(0,161px);
100         transform: translate(0,161px);
101 }
102 #nav a:hover,#nav li:hover > a {
103         color:#99ff33;
104 }

Step 3. Images

Our menu using only single image to reach custom background with and fading effect. Second image – just some green background for our demo.

    background menu
    page background
Live Demo

Conclusion

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

Initial idea is taken from here. Thank Stu Nicholls for his good website.
Rate article
© 2025 Script Tutorials