Creating A Dropdown Menu With HTML and C

3/13/2018 Creating a Dropdown Menu with HTML & CSS – Inspirational Pixels
About Contact Snippets Newsletter
  Tutorials  Articles  Videos  Freebies  Resources
 TUTORIALS  SEB KAY

P
e.g. Sass, jQuery,
Creating a
Dropdown Menu
with HTML & CSS
 31st July, 2014
 Reading Time 6 minutes
 157 Comments
 View Demo
Today we’re going to look at how to make a HTML and CSS

dropdown menu. No JavaScript or jQuery required!
Take a look at the demo to test it out and see what the end
result looks like. The below HTML and CSS dropdown menu
relies on z-index for some of the functionality, which can
http://inspirationalpixels.com/tutorials/creating-a-dropdown-menu-with-html-css 1/33
sometimes trip up beginners. If you get stuck, don’t

hesitate to ask me a question.
You might also like: Creating a Responsive Menu with

HTML, CSS & jQuery
Table of Contents
1. Skip to the HTML
2. Skip to the CSS
1 HTML Structure
Finished HTML
Advertisement
1 <div class="menu-wrap">
2 <nav class="menu">
3 <ul class="clearfix">
4 <li><a href="#">Home</a></li>
5 <li>
6 <a href="#">Movies <span class="arrow">▼</span></a>
 The IP
7 <ul class="sub-menu">
8 <li><a href="#">In Cinemas Now</a></li> Newsletter
9 <li><a href="#">Coming Soon</a></li>
10 <li><a href="#">On DVD/Blu-ray</a></li> By subscribing to
11 <li><a href="#">Showtimes & Tickets</a></li> the Inspirational
12 </ul> Newsletter you’ll
13 </li> get 3 exclusive
14 <li><a href="#">T.V. Shows</a></li> freebies and a
15 <li class="current-item"><a href="#">Photos</a></li> personally curated

16 <li><a href="#">Site Help</a></li> newsletter every
17 </ul> other week.
18 </nav>
19 </div>
SUBSCRIBE
FOR
FREE!
Ek Mukta Font
If you would like to use the same font as I’ve used you need
a link to it in the header.
1 <link rel="stylesheet" type="text/css" href="http://fonts.google
Wrapper and Nav

We start off with a wrapper div and give it a class of menu-
wrap . Inside that wrapper we put a nav and give it a class

of menu .
3 
4 </nav>
5 </div>
First Unordered List

The first unordered list we’ll be using needs a class of
clearfix (more on why when we write the CSS). Inside it
we’ll put a couple of links to act as menu content.
Advertisement
2 <li><a href="#">Home</a></li>
3 <li><a href="#">Movies <span class="arrow">▼</span></a></

4 <li><a href="#">T.V. Shows</a></li>
5 <li class="current-item"><a href="#">Photos</a></li>
6 <li><a href="#">Site Help</a></li> 
7 </ul>
Exclusive
Freebies
Nested Dropdown Menu Minimal

Video
For the dropdown menu we put another unordered list Player UI
inside the one we already have and the HTML code is
complete. FontAwesome
Icon
Template
2 <li><a href="#">Home</a></li> Making
3 <li> Something
4 <a href="#">Movies <span class="arrow">▼</span></a> Good
5 <ul class="sub-menu"> Takes
6 <li><a href="#">In Cinemas Now</a></li>
Time
7 <li><a href="#">Coming Soon</a></li>
8 <li><a href="#">On DVD/Blu-ray</a></li>
Clino UI
9 <li><a href="#">Showtimes & Tickets</a></li>
Kit
10 </ul>
11 </li>
12 <li><a href="#">T.V. Shows</a></li>
13 <li class="current-item"><a href="#">Photos</a></li> SEE ALL
FREEBIES!
14 <li><a href="#">Site Help</a></li> →
15 </ul>
2 CSS Styling
Finished CSS
1 body {
Web
Hosting
2 background:#bf5c71 url('body-bg.jpg'); for $5
3 } with
4 .clearfix:after {
Media
Temple
5 display:block;
Media
6 clear:both; Temple
7 } Shared
8 /*----- Menu Outline -----*/ Hosting
9 .menu-wrap { Advertisements
10 width:100%;
11 box-shadow:0px 1px 3px rgba(0,0,0,0.2);
12 background:#3e3436;
13 }
14 .menu {
15 width:1000px;
 Let's Be
16 margin:0px auto;
17 } Social
18 .menu li {
19 margin:0px; Follow us, like us
20 list-style:none; and +1 us to
21 font-family:'Ek Mukta'; receive exclusive
22 } downloads and
23 .menu a { freebies!
24 transition:all linear 0.15s;
25 color:#919191; Alternatively you
26 } can subscribe via
27 .menu li:hover > a, .menu .current-item > a { RSS if you’re a
28 text-decoration:none; little more old
29 color:#be5b70; school.
30 }
31 .menu .arrow {
32 font-size:11px;
 
33 line-height:0%;
34 }  
35 /*----- Top Level -----*/
36 .menu > ul > li {
37 float:left;
38 display:inline-block;
39 position:relative;
40 font-size:19px;
41 }
42 .menu > ul > li > a {
43 padding:10px 40px;
45 text-shadow:0px 1px 0px rgba(0,0,0,0.4);
46 }
47 .menu > ul > li:hover > a, .menu > ul > .current-item > a {
49 }
50 /*----- Bottom Level -----*/
51 .menu li:hover .sub-menu {
52 z-index:1;
53 opacity:1;
54 }
55 .sub-menu {
56 width:160%;
57 padding:5px 0px;
58 position:absolute;
59 top:100%;
60 left:0px;
61 z-index:-1;
62 opacity:0;
63 transition:opacity linear 0.15s;
66 }
67 .sub-menu li {
68 display:block;
69 font-size:16px;
70 }
71 .sub-menu li a {
73 display:block;
74 }
75 .sub-menu li a:hover, .sub-menu .current-item a {
77 }
Base Styling
We start the CSS with some base styling by setting a page
background color and setting up a clearfix. Don’t worry if
you don’t have the background image it’s only a simple
texture. You can grab it from the demo if needed.
The clearfix will stop an annoying bug where, if a parent

element has a floated child element, it will disappear.
1 body {
2 background:#bf5c71 url('body-bg.jpg');
3 }
4 .clearfix:after {
5 display:block;
6 clear:both;
7 }
Menu Setup
Now we need to set up the outline of the entire menu and
style a few ‘global’ elements (two or more elements with
the same styling).
1 /*----- Menu Outline -----*/

2 .menu-wrap {
3 width:100%;
6 }
7 .menu {
8 width:1000px;
9 margin:0px auto;
10 }
11 .menu li {
12 margin:0px;
13 list-style:none;
14 font-family:'Ek Mukta';
15 }
16 .menu a {
18 color:#919191;
19 }
20 .menu li:hover > a, .menu .current-item > a {
21 text-decoration:none;
22 color:#be5b70;
23 }
Dropdown Arrow
The arrow by default is quite large so we make the font-
size smaller and remove the line-height . If we leave the

default line-height the menu styling may become affected.
1 .menu .arrow {
2 font-size:11px;
3 line-height:0%;
4 }
Top Level Menu

To style just the top-level menu we can use the > symbol.
It states that only the first child element preceding the
parent will get the specified styling. E.g. .parent > child ,
only the top-level .child will get the styling whereas any
children of .child that are also called .child won’t.
We also set a position:relative; on the parent list item

incase it has a child (AKA a sub menu).
1 /*----- Top Level -----*/

2 .menu > ul > li {
3 float:left;
6 font-size:19px;
7 }
8 .menu > ul > li > a {
11 text-shadow:0px 1px 0px rgba(0,0,0,0.4);
12 }
15 }
Bottom Level Menu

Here’s the fun part…and also the main point of this article.
To style the sub menu we first need to position it. We do
that with position:absolute; . By setting a percentage as the
top instead of a fixed pixel value the sub menu will always
be positioned exactly at the bottom of its parent.
We also add z-index:-1; . This pushes the dropdown menu

behind the everything else on the page, including the body
element.
There’s also no opacity, this is so the sub menu can fade in

by using a transition.
For the transition you may want to use prefixed values if

you’re targeting older browsers, however for the purposes
of this tutorial we’ll be aiming at Firefox and Webkit based
browsers (Webkit browsers include Google Chrome and

Opera).
You may also wonder what the rgba(0,0,0,0.2) is. It states a

color (Red, Green and Blue) then the opacity (Alpha), in this
case it’s 20% (0.2)
1 /*----- Bottom Level -----*/

2 .sub-menu {
3 width:160%;
4 padding:5px 0px;
6 top:100%;
7 left:0px;
8 z-index:-1;
9 opacity:0;
13 }
To get the dropdown menu showing on hover we need to

add a line that states when hovering over a list item, show its
children. This has no affect on empty list items as they have
no children to show.

2 z-index:1;
3 opacity:1;
4 }
The rest is the styling of the sub menu list items and
anchor links.
1 .sub-menu li {
2 display:block;
3 font-size:16px;
4 }
5 .sub-menu li a {
7 display:block;
8 }
11 }
Conclusion
Some of the CSS used may be a little hard to wrap your
head around at first, especially if you’re a beginner. If you
need help in any way create a JSFiddle of your code and
post the link to it in the comments.
Thank you for reading and I look forward to chatting with

you below!
You might also like: Creating an Accordion with HTML, CSS

& jQuery
 Follow IP on Twitter
 Like IP on Facebook
Advertisement
Inspirational Newsletter
Join the newsletter to get the best articles, tutorials
and exclusive freebies every two weeks. As a
subscriber you get an eBook on productivity, a
WordPress theme and a social sharing button PSD.
Find out more →
Your Email Address...
Subscribe!
 Don’t worry, your email is 100% safe from spam! (Privacy Policy)
Related Posts
Creating a Creating an Modular,

Responsive Menu Accordion with Maintainable &
with HTML, CSS HTML, CSS & Reusable
& jQuery jQuery HTML/CSS
Leave a Comment
I really appreciate you taking the time to leave a comment!
If you'd like to post code, you can do so by putting your
code on a new line and wrapping it in the appropriate tags.
For example, to add HTML you would put the code between
[html] and [/html] .
* Your Name...
* Your Email Address...
Website URL...
* Your Comment...
Add Your Comment
Comments Pingbacks
NoobishUser / January 24th 2018 at 11:18 pm  REPLY
Thank you!
Helped me out! Best wishes to you man!!!
Best
xmllllll / January 16th 2018 at 1:35 pm  REPLY
Hi,
I tied to put the navigation bar in the center but failed to do
so. I have try to use padding 0 30% but when I resize my
window the navigation won’t be in the center. tried to use
text-align and margin 0 auto, all not working. appreciate
anyone can help.
Thanks.
xmlllll / January 16th 2018 at 1:30 pm  REPLY
Hi I have difficulties to align the navigation bar centre. I

tried several ways put padding-left, but when I resize the
windows the navigation not centred anymore. I tried use
margin: 0 auto; text-align all not working. appreciate

anyone can help. thanks
Jason / November 22nd 2017 at 10:14 pm  REPLY
Hello,
Thank you for taking the time to show us how to create this.
I am an elementary school teacher who is trying to learn to
code on my own. I am not happy with any of the websites
out there that I have found to use for my classroom. I have
decided to take it upon myself to learn to code and create a
website that all teachers can use and love.
Janine Rawnsley / November 1st 2017 at 9:58 am  REPLY
Thank you so much for this – great example with fab

explanations. I’m a little stuck with my implementation
though – I have to change .menu to a fixed position to get
the dropdowns to overlap a sibling div beneath. This works
but makes the dropdown panels fade in when you mouse
over the panel itself rather than just the menu entry at the
top. Any ideas for a quick win?
Tony / September 16th 2017 at 6:19 am  REPLY
Thanks so much for making this tutorial!!!!!!
It really helped me out.
But I’d like to ask, can you please show me how to make a
big title at the top-left corner of the website, just above the
drop-down menu?
That’d be greatly appreciated.
Thanks again,
Tony
Fariba / July 5th 2017 at 11:00 am  REPLY
thanks for this article

I want to responsive this menu
can you help me?
thanks again
edmond january / May 30th 2017 at 11:09 am  REPLY
i am a beginner and i would like know how i can fit in my

logo in your code of the above menu html/css
thank you
edmond
South Africa
Xavier King / February 26th 2017 at 11:06 pm  REPLY
Hi, I am trying to finish off my menu and headings,

however, when I resize the browser window everything
moves to the right and will not center or stay where I want
it too. Any help would be much appreciated. HTML and CSS
below.
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <meta name="description" content="Earth, Wind, Fire & Wate
6 <title>Earth, Wind, Fire & Water</title>
7 <link rel="stylesheet" href="../../Xavier website styles.css">
8 </head>
9 <body>
10 <div>
11 <header>
12 <h1><a href="../../Xavier home:portfolio page.html">Xavier King
13 </header>
17 <li><a href="../../Xavier home:portfolio page.html">Portfolio&
18 <li>
19 <a>Projects <span class="arrow">▼</span></a> <ul class="s
20 <li><a href="../freedom/freedom.html">Are We Free?</a></li>
21 <li><a href="../Ben Hart/Ben Hart.html">Ben Hart</a></li>
22 <li><a href="../Daisy Bertenshaw/Daisy Bertenshaw.html">Daisy
23 <li><a href="../Decay/Decay.html">Decay</a></li>
24 <li><a href="../Earth Wind FIre and Water/Earth, Wind, FIre and
25 <li><a href="../Frozen In Time/Frozen In Time.html">Frozen In T
26 <li><a href="../The CCTV's Eye/The CCTV's Eye.html">The CCTV's
27 </ul> <li><a href="../../Xavier CV page.html"> &nbsp
28 </li>
29 </ul>
30 </nav>
31 </div>
32 <h2>Earth, Wind, Fire, Water</h2>
33 <img class="mySlides" src="b&r air.jpg" height="500" alt="B &am
34 <img class="mySlides" src="b&y air.jpg" width="" height="500" a
35 <img class="mySlides" src="y&r air.jpg" width="" height="500" a
36 <img class="mySlides" src="b&r earth.jpg" width="" height="500
37 <img class="mySlides" src="b&y earth.jpg" width="" height="500
38 <img class="mySlides" src="y&r earth.jpg" width="" height="500
39 <img class="mySlides" src="b&r fire.jpg" width="" height="500"
40 <img class="mySlides" src="b&y fire.jpg" width="" height="500"
41 <img class="mySlides" src="y&r fire.jpg" width="" height="500"
42 <script>
43 var slideIndex = 0;
44 carousel();
45 function carousel() {
46 var i;
47 var x = document.getElementsByClassName("mySlides");
48 for (i = 0; i < x.length; i++) {
49 x[i].style.display = "none";
50 }
51 slideIndex++;
52 if (slideIndex > x.length) {slideIndex = 1}
53 x[slideIndex-1].style.display = "block";
54 setTimeout(carousel, 2000);
55 }
56 </script>
57 </div>
58 </body>
59 </html>
1 @charset "UTF-8";
2 /* CSS Document */
3 body{
4 width: 100%;
5 margin: 0, auto;
6 }
7 body {
8 min-width: 100px;
9 }
10 body {
11 background-color:rgba(255,255,255,1.00)
12 }
13 body, h1, h2, h3, p{
14 font-family: "Verdana",sans-serif;
15 }
16 h1{
17 font-size: 3em;
18 text-align: center;
19 font-weight:lighter;
21 margin-top: 0px;
22 margin-bottom: 0px;
23 }
24 h2, h3 {
25 font-weight: normal;
26 }
27 h2{
28 font-size: 1.3em;
29 text-align:fixed;
30 margin-right: 600px;
32 margin-top: 0px;
33 margin-left: 339px;
34 font-family: "Verdana",sans-serif;
35 }
36 h3, p {
37 font-size: 1em;
38 font-family: 100% "Verdana",sans-serif;
39 margin-left: 339px
40 }
41 ul{
42 font-size: 1.2em;
43 }
44 ul{
45 list-style-type: none;
46 text-align: center;
47 }
48 a, li, h2, h3, p{
49 text-decoration: none;
50 color: rgba(128,128,128,1.00)
51 }
52 img{
53 margin-top: 0px;
54 }
55 li{
56 margin-top: 0px;
57 }
58 header{
59 margin-top: 0px;
60 }
61 menu{
62 margin-top: 0px;
64 }
65 img {
66 width:inherit;
67 max-height:500px;
68 position:inherit;
69 object-fit: contain;
70 }
71 div{
72 width:100%;
74 margin-top: 0px;
75 border: 0px solid #FFFFFF;
76 position: relative;
77 }
78 .menu-wrap{
80 width: 1000px;
81 margin-top: 0px;
83 }
84 /* drop down menu */
85 .clearfix:after {
86 display:inherit;
87 clear:both;
89 }
90 .menu {
91 width: 720px;
92 min-width: 720px;
93 margin-left:259px;
94 }
95 .menu li {
96 margin: 0px;
97 list-style:none;
98 font-family:"Verdana",sans-serif;
99 }
100 .menu a {
102 color:rgba(135,135,135,1.00);
103 }
104 .menu li:hover > a, .menu .current-item > a {
105 text-decoration:none;
106 color:rgba(135,135,135,1.00);
107 }
108 .menu .arrow {
109 font-size:.5em;
110 line-height:0%;
111 }
112 .menu > ul > li {
113 float:left;
116 font-size:19px;
117 }
118 .menu > ul > li > a {
121 }
123 background:#DCDADA ;
124 }
126 z-index:6;
127 opacity:2;
128 }
129 .sub-menu {
130 width: 171px;
131 padding: 0px 0px;

132 position: absolute;
133 top: 44px;
134 left: 1px;
135 z-index: -1;
136 opacity: 0;
137 transition: opacity linear 0.15s;
138 box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
139 background-color: rgba(255,255,255,1.00);
140 height: 349px;
141 }
142 .sub-menu li {
143 display:block;
144 font-size:.7em;
145 color: rgba(135,135,135,1.00);
146 }
147 .sub-menu li a {
149 display:block;
150 }
152 background-color:rgba(231,231,231,1.00);
153 }
Roger / February 7th 2017 at 11:31 pm  REPLY
How do you change the color of the text before hovering

over it? It’s a gray color but I don’t see the HEX code for it
in the CSS of HTML.
Also the are a number of links to CSS files in the source

code of the demo page. One goes to a main.css.
Without that, it doesn’t work completely. The gray text
shows as underlined.
With it, the underlines go away, but then a huge black

rectangular box appears a the top of the page. I don’t know
how to get ride of that, without getting rid of the man.css
and then the gray text shows as underlined again.
I’m just trying to isolate the menu piece.
Also how to you align the text in the menu-wrap div. I want
to center the whole div and center and equally space out
the links in that div.
Thanks .. great stuff.
saurav mshra / February 3rd 2017 at 8:31 pm  REPLY
Sir .i try create nav bar with dropdown. I hw an slider just

below that but I want my nav should overflow on slider .but
it do not working . Any idea how it will wok
..
Alan / January 12th 2017 at 9:45 pm  REPLY
Hi
Great Drop down Menu but how do I incorporate a footer so

I can enter some text
And also I have added a few more menus at the end but
when I view it, these extra menu item are wrapped round
and appear on the next line,
Hope you can help
Mohit Joshi / January 10th 2017 at 6:41 am  REPLY
I have tried the above code as it is but it is not showing the

given look and feel. I am unable to find the demo file that
can be extracted for running the code. Kindly mail me the
link of that file if available.
Simha / November 23rd 2016 at 1:17 pm  REPLY
This article helped me a lot, thank you! with

[css]
.menu > ul > li:hover > a, .current-item > a{
background:#2e2728;
}
does “a” mean the first dropdown menu, or something
else? Thank you
Karen / October 28th 2017 at 9:34 pm  REPLY
a means active and # means id. So when you see a

href=”#”, it means go to the item with the id. If you
want it to actual go to an item’s id, you have to have
given the item an id like id=”coolpage” first. Then you
can use the a href=”coolpage” to actually go to the
cool page, assuming that the id exists on the same

html page. If you assign an actual web address to the
href like a href=”http://somewebsite.com”, the item
will become a link to another web page when clicked.
Dmitry / September 11th 2016 at 8:11 pm  REPLY
For everyone wondering why it’s not working, and why

background of menu dissapers:
add content: “”; to your clearfix class, like this:
.clearfix::after {
content: “”;
clear: both;
display: block;
}
sanchi / August 19th 2016 at 1:17 am  REPLY
can you send or show us the whole code in order,i am stuck

there
Arjun / April 14th 2017 at 4:01 pm  REPLY
yes u can
Most browsers have Developer tools that you can use

to view the source code on a web page. For example,
Google Chrome’s tools appear when you select Ctrl +
Shift + i. When you see the tools window pop-up on the
side of your screen, click on the “Sources” tab. This will
bring up another window with a list of the resources
used to create a web page. On this site and for this
tutorial, the file is called “comment-page-3”.
Victor / July 29th 2016 at 8:47 am  REPLY
Hey,
I am new to HTML and CSS. Why won’t clicking on the tabs

take me to that tab? Even in the Demo it just stays on the
“photos” tab.
Thanks for your help,

Victor
For navigation links to work, you need to change the a

href=”#” to a href=”http://www.google.com”,
substituting the actual web address of your link for the
google address. The “#” takes you to the existing page

you are on, so it doesn’t go any where. If you want to
link to an item on the same page, you can use its id as
the href=”[value]”. So, suppose you have a div section
on your page with the id of “partTwo”. You would type
a href=”partTwo”.
James Birrell / June 29th 2016 at 10:48 am  REPLY
I like this menu but would prefer the sub-menu to open and
close on click rather than hover. At present the sub-menu
tends to open when I’m trying to open a menu below. NB
I’m working offline. The current menu on my site will be
replaced.
James
Lachlan Eavestaff / May 31st 2016 at 2:33 am  REPLY
May I ask, is this code open source and free to use?
Jennt / May 22nd 2016 at 8:38 am  REPLY
The background color for the menu-wrapper div wasn’t

working for me until I comment (and later remove) the float
rule to the list items of the main menu.
.menu > ul > li {

/* float:left; */
display:inline-block;
position:relative;
font-size:19px;
Now it works just fine. Nothing changed, except now I can

actually set the background color of the div
george / May 6th 2016 at 5:09 pm  REPLY
Hello, when i write this rule below
1 .menu > ul > li {

2 float:left;
3 }
the ul .menu and .menu-wrap height becomes 0
https://jsfiddle.net/5zg9zd5h/
Lavanya Kavarthapu / May 6th 2016 at 2:01 pm  REPLY
Hi Mr Kay
I am trying to implement submenu for my webpage. I

followed your tutorial but its not working. Could you please
help.
Please find the code
1 

2 <b>HOME</b></em></a>
3 <b>PROFILE</b></em></a>
4 <b>CONDITIONS</b></em></a>
5 In Cinemas Now</a>
6 Coming Soon</a>
7 On DVD/Blu-ray</a>
8 Showtimes & Tickets</a>
9 <b>MEDIA</b></em></a>
10 <b>RECOVERY</b></em></a>
11 <b>TESTIMONIALS</b></em></a>
12 <b>CLINIC LOCATIONS</b></em></a>
13 <b>CONTACT</b></em></a>
14 
Below is style sheet
1 #header .nav-box { left top repeat-x; width:100%;}

2 #header .nav-box .left { no-repeat left top; }
3 #header .nav-box .right { no-repeat right top; height:47px;}
4 /*-- header navigation --*/
5 #header .nav-box ul { font-family:"Trebuchet MS", Arial, Helvet
6 #header .nav-box ul li { display:inline;}
7 #header .nav-box ul li a { display:block; float:left; color:#ff
8 #header .nav-box ul li a:hover { left top repeat-x;}
9 #header .nav-box ul li a:hover b {no-repeat right 10px;}
10 #header .nav-box li:hover .sub-menu {
11 z-index:1;
12 opacity:1;
13 }
14 .sub-menu {
15 width:160%;
16 padding:5px 0px;
18 top:100%;
19 left:0px;
20 z-index:-1;
21 opacity:0;
25 }
26 .sub-menu li {
27 display:block;
28 font-size:16px;
29 }
30 .sub-menu li a {
32 display:block;
33 }
36 }
The html of this code needs to be corrected. HTML tags

need starting and ending tags. For example or . The
biggest issue I can see is missing tags. You have used
multiple end tags without starting with any start tags.
That is one reason the code does not work. Each item
within an unordered list needs to be wrapped in the
and tags in order to be rendered by the browser as list
items. So, for a list of items in a class called foods, you
would put:
bacon
apple
cheese
watermelon
Another great resource for learning basic HTML and
CSS coding is w3schools.com.
Zacharie / April 14th 2016 at 4:13 am  REPLY
Dear Colleague,
I am having difficulty using the dropdown html+css code
you posted. The code you posted are separate in two so how
to merge them in to one code listing? should I add the CSS
code right after completing the HTML code. That is to say
after the ? and where shoud I add also the link
background?
do you have the complete one list code if yes could you
send as attached file? I really appreciate your time and help
that will be given to me
Best regards
Zacharie
Jeff C. / April 1st 2016 at 4:49 am  REPLY
Fun tutorial but can’t get the background color to show up

in the nav. Have you found the solution for this?
Michael M. / August 30th 2016 at 2:22 pm  REPLY
In CSS it says:
.clearfix:after {
display:block;
clear:both;
}
Change it to:
.clearfix:after {
display:block;
clear:both;
content:’ ‘;
}
This should fix your problem
Yuukiss / March 18th 2016 at 3:41 pm  REPLY
Hello, can you help me with the CSS program for a sub-sub-
menu? like a cascading drop down Because i have been
trying it for 2 days now and i cant make it work..
Advertisement
 About Inspirational  Inspirational

Pixels Newsletter
My name's is Seb and I run Inspirational The Inspirational Newsletter goes out every
Pixels. It's a web design and development two weeks and is packed full of the latest
blog that offer articles, tutorials, freebies design articles, tutorials and freebies from
and code snippets to help with everything around the web. Get 3 exclusive freebies for
involved in making modern, usable subscribing! A free E-Book, WordPress
websites. theme and PSD.
Read About IP → Subscribe to The Newsletter →
© 2013 - 2018 Seb Kay. All rights reserved. Proudly powered by (mt).
Archives / Contact Us / Terms of Use / Privacy Policy / Back to Top ↑

Creating A Dropdown Menu With HTML and C

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Creating A Dropdown Menu With HTML and C

Uploaded by

Copyright:

Available Formats

3/13/2018 Creating a Dropdown Menu with HTML & CSS – Inspirational Pixels

About Contact Snippets Newsletter

  Tutorials  Articles  Videos  Freebies  Resources

 TUTORIALS  SEB KAY

Today we’re going to look at how to make a HTML and CSS

sometimes trip up beginners. If you get stuck, don’t

You might also like: Creating a Responsive Menu with

2. Skip to the CSS

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

1 <link rel="stylesheet" type="text/css" href="http://fonts.google

Wrapper and Nav

wrap . Inside that wrapper we put a nav and give it a class

First Unordered List

3 <li><a href="#">Movies <span class="arrow">&#9660;</span></a></

Nested Dropdown Menu Minimal

The clearfix will stop an annoying bug where, if a parent

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

size smaller and remove the line-height . If we leave the

Top Level Menu

We also set a position:relative; on the parent list item

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

Bottom Level Menu

We also add z-index:-1; . This pushes the dropdown menu

There’s also no opacity, this is so the sub menu can fade in

For the transition you may want to use prefixed values if

browsers (Webkit browsers include Google Chrome and

You may also wonder what the rgba(0,0,0,0.2) is. It states a

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

To get the dropdown menu showing on hover we need to

1 .menu li:hover .sub-menu {

Thank you for reading and I look forward to chatting with

You might also like: Creating an Accordion with HTML, CSS

Your Email Address...

Creating a Creating an Modular,

* Your Email Address...

Add Your Comment

NoobishUser / January 24th 2018 at 11:18 pm  REPLY

Helped me out! Best wishes to you man!!!

xmllllll / January 16th 2018 at 1:35 pm  REPLY

xmlllll / January 16th 2018 at 1:30 pm  REPLY

Hi I have difficulties to align the navigation bar centre. I

margin: 0 auto; text-align all not working. appreciate

Jason / November 22nd 2017 at 10:14 pm  REPLY

Janine Rawnsley / November 1st 2017 at 9:58 am  REPLY

Thank you so much for this – great example with fab

Tony / September 16th 2017 at 6:19 am  REPLY

Thanks so much for making this tutorial!!!!!!

It really helped me out.

That’d be greatly appreciated.

Fariba / July 5th 2017 at 11:00 am  REPLY

thanks for this article

edmond january / May 30th 2017 at 11:09 am  REPLY

i am a beginner and i would like know how i can fit in my

Xavier King / February 26th 2017 at 11:06 pm  REPLY

Hi, I am trying to finish off my menu and headings,

131 padding: 0px 0px;

Roger / February 7th 2017 at 11:31 pm  REPLY

How do you change the color of the text before hovering

Also the are a number of links to CSS files in the source

With it, the underlines go away, but then a huge black

Thanks .. great stuff.

saurav mshra / February 3rd 2017 at 8:31 pm  REPLY

Sir .i try create nav bar with dropdown. I hw an slider just

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

1 /----- Menu Outline -----/

1 /----- Top Level -----/

1 /----- Bottom Level -----/