How to Create a CSS Dropdown Menu

To create a menu with css is not a difficult task. You must understand the css and selectors of css. And you are able to create your own drop down menu with css. There is no need of images, jquery or javascript. If you are not able to create a menu with css no need to worry you can find it on our site.
In this post you will learn how to create a drop down menu with css3 only. We are not using any image or any javascript in this. And if you don't want to use jquery menu in your site and you want to use css3 menu. Then here is the best option for you. You can customize it easily.

Demo     Download

Now we are creating a dropdown menu that has two levels of drop downs. The child drop down will be show when the user will hover on parent link.
Now follow the steps for create a menu.

Html Structure

I am not using div instead I am using nav because I am using html 5 and The

tag defines a section of navigation links.
This is the html structure for menu first ul is the master ul. We add another ul under the Services and Articles li that is the child menu for these. For article drop down has further child. And also we have create 3 div with bottomArrow and RightArrow class. These divs will indicate that this li has further children. If you do not want to show them you can hide them.

<nav><br /> <ul><li><a href="//www.blogger.com/blogger.g?blogID=4276763109087946480#">Home</a></li> <li><a href="//www.blogger.com/blogger.g?blogID=4276763109087946480#">Services</a><br /> <br /> <ul><li><a href="//www.blogger.com/blogger.g?blogID=4276763109087946480#">Web Designing</a></li> <li><a href="//www.blogger.com/blogger.g?blogID=4276763109087946480#">User Development</a></li> </ul><br /> </li> <li><a href="//www.blogger.com/blogger.g?blogID=4276763109087946480#">Articles</a><br /> <br /> <ul><li><a href="//www.blogger.com/blogger.g?blogID=4276763109087946480#">Photoshop</a></li> <li><a href="//www.blogger.com/blogger.g?blogID=4276763109087946480#">Illustrator</a></li> <li><a href="//www.blogger.com/blogger.g?blogID=4276763109087946480#">Web Designing</a><br /> <br /> <ul><li><a href="//www.blogger.com/blogger.g?blogID=4276763109087946480#">HTML</a></li> <li><a href="//www.blogger.com/blogger.g?blogID=4276763109087946480#">CSS</a></li> </ul></li> </ul></li> <li><a href="//www.blogger.com/blogger.g?blogID=4276763109087946480#">Inspiration</a></li> </ul></nav> <br /> <br /> <br />

After creating the html your html will be look as this. These are simple unordered lists.

css for Menu

nav ul ul {
 display: none;
}

Now time to apply css to the menu . I am using tag name and advance css selectors instead of id or class because it will make my html and css clean and more readable. Now first I hide all the child ul I have written nav ul ul. It means all ul inside a ul. So all the child ul is hidden now.

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;
}

Now I am defining background for parent ul by writing nav ul. And I am using css3 gradient background. You can change the color combination as per your requirements. And I have also give position: relative; the child ul have absolute position and then they will positioned according to parent ul. Otherwise they will positioned as the widow.

In nav ul li I have define float: left; it means all the li of parent ul will comes in a single row.

In nav ul li a I have give style to text like font-family, font size etc. And I have give display: block; if I do not give it block then it will not get padding. And it will not display as box.

nav ul li:hover>ul {
 display: block;
}
nav ul li:hover  {

background: #7abcff; /* Old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
background: linear-gradient(to bottom, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
}
nav ul li:hover a {
 color: rgba(0, 0, 0, 0.68);
}

In nav ul li:hover>ul I have give property display:block to ul on hover of li. And I have written nav ul li:hover>ul It means when anyone will hover on li then its immediate child ul be display. If I will not put > then all the ul be display.

In nav ul li:hover I have change the background color of each li on which user will hover.

In nav ul li:hover a I have changed the text color when user will hover on li.

nav ul ul {
 background: #5f6975;
 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;
 }

Now I have give complete style to main menu. Now the time is to apply css on sub menus.

In nav ul ulI have give background color to child ul and padding will set the position of text and also give position: absolute; now the sub ul will not affect the parent ul when it display and top: 100%; will make it display where the parent li end as vertically .

In nav ul ul li I have target the li of sub menu and give float: none because I don’t want to display them in a single line. And then give position: relative that will set the position of their child ul.

In nav ul ul li a I have give padding to center the text .

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

In nav ul ul ul I am targeting the third sub menu and position: absolute will set its position that will not affect its parent and left: 100%; will make it display where its parent li ends as horizontally. And top: 0; will make it display where its parent li starts as vertically.



View Demo

Read more

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;
}

Read more

25 Jquery Horizontal And Vertical Menu

First thing that put impact on a website is menu of website. So the menu of your website should be perfect. In last post I have discussed about css3 menu. But the other option is create a menu with jquery. Because you can give really awesome animations with jquery. If you are not as much familiar with jquery.

No problem . There are many online free jquery menu plugins available. Which you can use freely. Some of jquery menu plugins are as follows you can you any of them in your site.

jQuery Bubble menu

Demo

Rock Bubble Menu

Demo

Grey Golden Glossy Menu

Demo

Green Slide Menu

Demo

Window Type Menu

Demo

Green DropDown Menu

Demo

Black Horizontal and Vertical Menu

Demo

Full Screen Menu

Demo

Vertical Slide Menu

Demo

Background Navigation Menu

Demo

Slide Push Menu

Demo

Large Drop Down Menu

Demo

Colored Drop Down Menu

Demo

Simple Tabbed Jquery Menu

Demo

Animated Drop Down Menu

Demo

Professional Drop down Menu

Demo

jQuery Simple Drop down Menu

Demo

Vimio Like Menu

Demo

Glossy Grey Menu

Demo

Black and Grey Menu

Demo

Text Icom Square Menu

Demo

Slide Up Menu

Demo

Single Page Website Menu

Demo

Jquery Icon Menu

Demo

Simple Horizontal Menu

Demo

Read more

33 Single Page Website Design

Website developing is an interesting task. There are so many design techniques are followed by designers. Today i am going to discuss about single page website design.Now a days the single page website is very commonly used. Because it has many advantages. Like your visitors will find all the data on a single page. He or she does not need to navigate different pages. And it also reduces the complexity of website. The single page website may take a small time when it first load but once it was loaded you need not to navigate to other page and reload the pages again and again.

Here is a list of best one page website design. You can get an idea for design your website.

List of Single Page Website Design

Visit Site


Visit Site


Visit Site


Visit Site


Visit Site


Visit Site


Visit Site


Visit Site


Visit Site


Visit Site


Visit Site


Visit Site


Visit Site


Visit Site


Visit Site


Visit Site


Visit Site


Visit Site


Visit Site


Visit Site


Visit Site


Visit Site


Visit Site


Visit Site


Visit Site


Visit Site


Visit Site


Visit Site


Visit Site


Visit Site


Visit Site


Visit Site


Visit Site


If you want to add your site here then mail us at aps.singh67@gmail.com

Read more