Creating a Dropdown Menu with HTML & CSS

[easy-social-share counters=0 style="button"]

Now we’re going to have a look at how to get a HTML or CSS dropdown menu. Not any JavaScript and jQuery needed!
Have a look at the test to try it out and then notice what the final results is similar to. The below HTML or CSS dropdown menu depends on z-index for a few of the functionality,that can some-times trip up starters. When you get trapped, don’t think twice to ask me a query.
You can also just like: Setting up a Responsive Menu with HTML, CSS & jQuery

Table of Contents

Skip to the HTML

Skip to the CSS

 HTML Structure

Finished HTML

<div class="menu-wrap">

<nav class="menu">

<ul class="clearfix">

<li><a href="#">Home</a></li>

<li>

<a href="#">Movies <span class="arrow">▼</span></a>



<ul class="sub-menu">

<li><a href="#">In Cinemas Now</a></li>

<li><a href="#">Coming Soon</a></li>

<li><a href="#">On DVD/Blu-ray</a></li>

<li><a href="#">Showtimes & Tickets</a></li>

</ul>

</li>

<li><a href="#">T.V. Shows</a></li>

<li class="current-item"><a href="#">Photos</a></li>

<li><a href="#">Site Help</a></li>

</ul>

</nav>

</div>

Ek Mukta Font

If you wish to using the similar font as I’ve used you require a hyperlink to it in the header.

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ek+Mukta">

Wrapper and Nav

<div class="menu-wrap">

<nav class="menu">

<!-- NAV -->

</nav>

</div>

First Unordered List

The 1st unordered list we’ll making use of requires a class of clear fix (a lot more on exactly why when we write the CSS). Inside it we’ll put a few of links to your site to act like menu articles.

<ul class="clearfix">

<li><a href="#">Home</a></li>

<li><a href="#">Movies <span class="arrow">▼</span></a></li>

<li><a href="#">T.V. Shows</a></li>

<li class="current-item"><a href="#">Photos</a></li>

<li><a href="#">Site Help</a></li>

</ul>

Nested Dropdown Menu

For the dropdown menu we put one more un ordered list inside the just one we have already so the HTML code is perfect.

<ul class="clearfix">

<li><a href="#">Home</a></li>

<li>

<a href="#">Movies <span class="arrow">▼</span></a>

<ul class="sub-menu">

<li><a href="#">In Cinemas Now</a></li>

<li><a href="#">Coming Soon</a></li>

<li><a href="#">On DVD/Blu-ray</a></li>

<li><a href="#">Showtimes & Tickets</a></li>

</ul>

</li>

<li><a href="#">T.V. Shows</a></li>

<li class="current-item"><a href="#">Photos</a></li>

<li><a href="#">Site Help</a></li>

</ul>

CSS Styling

Finished CSS

body {

background:#bf5c71 url('body-bg.jpg');

}



.clearfix:after {

display:block;

clear:both;

}



/*----- Menu Outline -----*/

.menu-wrap {

width:100%;

box-shadow:0px 1px 3px rgba(0,0,0,0.2);

background:#3e3436;

}



.menu {

width:1000px;

margin:0px auto;

}



.menu li {

margin:0px;

list-style:none;

font-family:'Ek Mukta';

}



.menu a {

transition:all linear 0.15s;

color:#919191;

}



.menu li:hover > a, .menu .current-item > a {

text-decoration:none;

color:#be5b70;

}



.menu .arrow {

font-size:11px;

line-height:0%;

}



/*----- Top Level -----*/

.menu > ul > li {

float:left;

display:inline-block;

position:relative;

font-size:19px;

}



.menu > ul > li > a {

padding:10px 40px;

display:inline-block;

text-shadow:0px 1px 0px rgba(0,0,0,0.4);

}



.menu > ul > li:hover > a, .menu > ul > .current-item > a {

background:#2e2728;

}



/*----- Bottom Level -----*/

.menu li:hover .sub-menu {

z-index:1;

opacity:1;

}



.sub-menu {

width:160%;

padding:5px 0px;

position:absolute;

top:100%;

left:0px;

z-index:-1;

opacity:0;

transition:opacity linear 0.15s;

box-shadow:0px 2px 3px rgba(0,0,0,0.2);

background:#2e2728;

}



.sub-menu li {

display:block;

font-size:16px;

}



.sub-menu li a {

padding:10px 30px;

display:block;

}



.sub-menu li a:hover, .sub-menu .current-item a {

background:#3e3436;

}

Base Styling

We get started the CSS with a few basis style by set up a web page background color or staging a clearfix. Don’t worry in case you don’t have got the background picture it’s only a basic texture. You can actually pick up it from the trial if required.
The clearfix will be closed an damaging error just where, in case in fact a parent element is a floated kid element, it would disappear altogether.

body {

background:#bf5c71 url('body-bg.jpg');

}

.clearfix:after {

display:block;

clear:both;

}

Menu Setup

Right now we will need to start up the outline of the whole entire menu or style a couple of ‘global’ components (2 or more components with similar style).

/*----- Menu Outline -----*/

.menu-wrap {

width:100%;

box-shadow:0px 1px 3px rgba(0,0,0,0.2);

background:#3e3436;

}

.menu {

width:1000px;

margin:0px auto;

}

.menu li {

margin:0px;

list-style:none;

font-family:'Ek Mukta';

}

.menu a {

transition:all linear 0.15s;

color:#919191;

}

.menu li:hover > a, .menu .current-item > a {

text-decoration:none;

color:#be5b70;

}

Dropdown Arrow

The arrow by default can be quite big so we help to make the font-size small and then remove the line-height. In case we leave the default line-height the menu style might become affected.

.menu .arrow {

font-size:11px;

line-height:0%;

}

Top Level Menu

To style just simply the top-level menu we are able to using the> icon. It states that simply the 1st kid component preceding the parent will be able to get the specific style. E.g. parent > kid, only the top-level.child will get the style where any kind of small children of.child that can be also known as.child won’t.
We also set a situation:relative; on the parent listing item in case it has a kid (AKA a sub menu).

/*----- Top Level -----*/

.menu > ul > li {

float:left;

display:inline-block;

position:relative;

font-size:19px;

}

.menu > ul > li > a {

padding:10px 40px;

display:inline-block;

text-shadow:0px 1px 0px rgba(0,0,0,0.4);

}

.menu > ul > li:hover > a, .menu > ul > .current-item > a {

background:#2e2728;

}

Bottom Level Menu

Here’s the enjoyable part…and as well the main purpose of the post. To style the sub menu we 1st require to current position it. We do this with trade position: absolute;  By set up a percentage as the top instead than a specified pixel value the sub menu are always positioned actually at the end of it is parent.
We also insert z-index:-1;. This moves the dropdown menu behind the anything else on the web page, this includes the body system component.
There’s also not any opacity, this really is and so the sub menu can fade in with the use of a transformation.
For the make the transition you might want to using prefixed values in case you’re focusing on old browsers, even so for the requirements on this article we’ll be aiming at Firefox and then Webkit based browsers (Webkit browsers can include Google Chrome and then Opera).
You might also question just what the rgba(0 ,0 ,0 ,0 .2) is. It states a color (Red, Green or Blue) after that the opacity (Alpha), in cases like this it’s 20% (0 .2)

/*----- Bottom Level -----*/

.sub-menu {

width:160%;

padding:5px 0px;

position:absolute;

top:100%;

left:0px;

z-index:-1;

opacity:0;

transition:opacity linear 0.15s;

box-shadow:0px 2px 3px rgba(0,0,0,0.2);

background:#2e2728;

}

To get the dropdown menu displaying on hover we will need to insert a line that states whenever hovering over a listing item, display it is kids. This does not have any effect on blank list items since they have no kids to display.

.menu li:hover .sub-menu {

z-index:1;

opacity:1;

}

The take a rest is the style of the sub menu list items or anchor hyperlinks.

.sub-menu li {

display:block;

font-size:16px;

}

.sub-menu li a {

padding:10px 30px;

display:block;

}

.sub-menu li a:hover, .sub-menu .current-item a {

background:#3e3436;

}

Conclusion

A few of the CSS made use of might be just a little very hard to gift wrap the head around first, especially when you’re just beginning. When you need help out with any kind of way set up a JSFiddle of your code or post the url to it in the comments.

Hope you all like this Tuts byCodiTuts.com, if yes then keep us supporting by sharing this post, Cheerful Coding smiley.

Submit a comment

Pin It on Pinterest