Demo of Css 3 Menu

Back to Tutorial

• Home
  
• Services
  • Web Designing
    
  • User Development
    
• Articles
  • Photoshop
    
  • Illustrator
    
  • Web Designing
    • HTML
      
    • CSS
      
• Inspiration
  

Source Code

Html

<nav><br /> <ul><li><a href="#">Home</a></li> <li><a href="#">Services</a><br /> <br /> <ul><li><a href="#">Web Designing</a></li> <li><a href="#">User Development</a></li> </ul><br /> </li> <li><a href="#">Articles</a><br /> <br /> <ul><li><a href="#">Photoshop</a></li> <li><a href="#">Illustrator</a></li> <li><a href="#">Web Designing</a><br /> <br /> <ul><li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> </ul></li> </ul></li> <li><a href="#">Inspiration</a></li> </ul></nav> <br /> <br /> <br />

css

nav ul ul {
 display: none;
}

nav ul {
 background: #b3b7bf;
 background: -moz-linear-gradient(top, #b3b7bf 0%, #7c7e84 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b3b7bf),
  color-stop(100%, #7c7e84) );
 background: -webkit-linear-gradient(top, #b3b7bf 0%, #7c7e84 100%);
 background: -o-linear-gradient(top, #b3b7bf 0%, #7c7e84 100%);
 background: -ms-linear-gradient(top, #b3b7bf 0%, #7c7e84 100%);
 background: linear-gradient(to bottom, #b3b7bf 0%, #7c7e84 100%);
 box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
 padding: 0 20px;
 border-radius: 0px;
 list-style: none;
 position: relative;
 display: inline-block;
}

nav ul li {
 float: left;
}

nav ul li a {
 display: block;
 padding: 20px 40px ;
 color: rgba(0, 0, 0, 0.68) ;
 font-family: arial ;
 text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6) ;
 text-decoration: none ;
 font-size: 15px ;
 font-weight: bold ;
}

nav ul li:hover>ul {
 display: block;
}
nav ul li:hover {
 background: #7c7e84;
 background: -moz-linear-gradient(top, #7c7e84 0%, #b3b7bf 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7c7e84),
  color-stop(100%, #b3b7bf) );
 background: -webkit-linear-gradient(top, #7c7e84 0%, #b3b7bf 100%);
 background: -o-linear-gradient(top, #7c7e84 0%, #b3b7bf 100%);
 background: -ms-linear-gradient(top, #7c7e84 0%, #b3b7bf 100%);
 background: linear-gradient(to bottom, #7c7e84 0%, #b3b7bf 100%);
 filter: progid : DXImageTransform.Microsoft.gradient (   startColorstr =
  '#7c7e84', endColorstr = '#b3b7bf', GradientType = 0 );
}

nav ul li:hover a {
 color: rgba(0, 0, 0, 0.68);
}

nav ul ul {
 background: #82848A ;
 border-radius: 0px ;
 padding: 0 ;
 position: absolute ; 
 top: 100%;
}

nav ul ul li {
 float: none;
 border-top: 1px solid #fff;
 position: relative;
}

nav ul ul li a {
 padding: 15px 40px;
}


nav ul ul ul {
 position: absolute;
 left: 100%;
 top: 0;
}