How To Create Dropdown menu Pure Css and Html

With the help of some advanced selectors a dropdown menu can be easily created with CSS. Throw in some fancy CSS3 properties and you can create a design that was once only achievable with background images and Javascript. Follow this tutorial to see the step by step process of building your own pure CSS dropdown menu.

Noted:

Free to copy and paste the dropdown menu code.

The menu we’ll be creating features two sub categories that appear once the parent link is activated by a hover. The first series of sub-links appear underneath main nav bar, then the second series of links fly out horizontally from the first dropdown. Take a look at the CSS dropdown menu demo to see it all in action.

The Html Structure

<ul>

  • First up we’ll need to create the HTML structure for our CSS menu. We’ll use HTML5 to house the navigation menu in aelement, then add the primary navigation links in a simple unordered list.

<ul> <
li>Home

  • The first sets of sub-menus can then be added under the “Tutorials” and “Articles” links, each one being a complete unordered list inserted within the
  • of its parent menu option.

<ul>

  • The secondary sub-menu is nested under the “Web Design” option of the first sub-menu. These links are placed into another unordered list and inserted into the “Web Design”
  • .

  • So far this leaves us with a neat layout of links with the sub-menus having a clear relation to their parents.

The Css Styling

nav ul ul {
 display: none; 
} 

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

Let’s begin the CSS by getting the basic dropdown functionality working. With CSS specificity and advanced selectors we can target individual elements buried deep in the HTML structure without the need for extra IDs or classes. First hide the sub menus by targeting any UL’s within a UL with the display:none; declaration. In order to make these menus reappear they need to be converted back to block elements on hover of the LI.

  • The > child selector makes sure only the child UL of the LI being hovered is targeted, rather than all sub menus appearing at once.

Dropdown menu

nav ul { 
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15); padding: 0 20px;
border-radius: 10px; list-style: none;
position: relative;
display: inline-table;
}nav ul:after {
content: "";
clear: both;
display: block; 
}
  • We can then start to style up the main navigation menu with the help of CSS3 properties such as gradients, box shadows and border radius. Adding position:relative; will allow us to absolutely position the sub menus according to this main nav bar, then display:inline-table will condense the width of the menu to fit.
  • The clearfix style rule will clear the floats used on the subsequent list items without the use of overflow:hidden, which would hide the sub menus and prevent them from appearing.

nav ul li { 
float: left;
}

nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}

nav ul li:hover a {
color: #fff;
}

nav ul li a {
display: block;
padding: 25px 40px;
color: #757575;
text-decoration: none; 
}

The individual menu items are then styled up with CSS rules added to the <li> and the nested anchor. In the browser this will make the link change to a blue gradient background and white text.

Dropdown menu

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

nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f; 
}

The main navigation bar is now all styled up, but the sub menus still need some work. They are currently inheriting styles from their parent elements, so a change of background and the removal of the border-radius and padding fixes their appearance.

To make sure they fly out underneath the main menu they are positioned absolutely 100% from the top of the UL (ie, the bottom).

The LI’s of each UL in the sub menu don’t need floating side by side, instead they’re listed vertically with thin borders separating each one. A quick hover effect then darkens the background to act as a visual cue.

nav ul ul ul {
position: absolute;
left: 100%;
top:0; 
}
  • The final step is to position the sub-sub-menus accordingly. These menus will be inheriting all the sub-menu styling already, so all they need is to be positioned absolutely to the right (left:100%) of the relative position of the parent <li>.

The Completed Pure CSS Dropdown Menu

Dropdown menu style

 

Advertisements

About Aoqy

Hye guys,i would like to share about me and hired me if you would to do project with me.Overall,i like everything about design.anything as long i could create for you very soon.I just hope that i could help many people about development about thier company.So on my site is all about guide and how to develop more easier way to let your project much easier.so find out more .Many thanks
This entry was posted in Tutorial and tagged , , , , , , , , , , , , . Bookmark the permalink.

3 Responses to How To Create Dropdown menu Pure Css and Html

  1. Very cool thanks for the info!

  2. wow, this is cool… 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s