How to Create Transparent Drop Down Navigation Menu with CSS and HTML Tutorial

Upgrade your Clever Techie learning experience:

UPDATE! (9/13/19) New features and improvements for Clever Techie Patreons:

1. Download full source code with detailed comments - easy to learn and understand code
2. Weekly source code file updates by Clever Techie - every time I learn new things about a topic I will add it to the source file and let you know about the update - keep up with the latest coding technologies
3. Library of custom Clever Techie functions with descriptive, easy to understand comments - skyrocket coding productivity, code more efficiently by using Clever library of custom re-usable functions
4. Syntax code summary - memorize and review previously learned code faster
4. Organized file structure - access all Clever Techie lessons, source code, graphics, diagrams and cheat sheet from a single workspace - no more searching around for previously covered material and source code - save enormous amount of time and effort
5. Outline of topics the source file covers - fast review of all previously learned coding lessons
6. Access to all full HD 1080p videos with no ads
7. Console input examples - interactive examples that make it easier to understand and learn coding
8. Access to updated PHP Programming Book by Clever Techie

[abdulrazaq]

i'm new in this field i never think so that we can create header like this and can do just by using html and Css ..
Thanks a lot for this precious information ... Stay Blessed

[ronanmatrix]

Malupet ka talaga Clever Techie. Sana marami ka pang matulungang IT Students.

[stormybear]

Freakin' AWESOME!!! Easily one of the best tutorials I've seen in a long time! You rock, dude!!!

[xopowo]

thank you for the explanation, I spent three days trying to understand it, and by chance I found your tutorial... I am truly thankful. Merry Christmas!

[ecoatings]

This was easily the best tutorial on this I have found. Perfect.

[veasnanoeun]

Please be informed that you will have to write the about code in a <div> tag! If not, the navigation will be covered by future div tag!

[KGVirus]

I know how to fix your problems ! everyone . when you list an item <li>, you must have the tag <a> inside it to work while hovering Example : <li><a> Test </a></li>

[ssigitas]

Probably easiest way I have ever seen, without any grid, flex complicated combination. Perfect

[ezgirlmamaslove]

Got it! Though I encounter some problems with adding the background. My problem was that I wasn't careful in adding space in between my code. I love how you explained it. Thank you so much for this informative video of yours.

[GhGh-xclp]

You rock, really direct to the point.
I have lost a half of day on another useless video.
Thanks for the explanation. You deserve a big like

[chinweezeamama]

Really simple, exact and understandable. good work indeed. Though 2 years back but it still gives light to web designers. well done brother and God bless you and increase your creative ability

[joemiller]

Just changed what he typed by putting <ul> at end of first level <li> and then put the corresponding </ul> after last </li> in each group. He didn't do anything wrong. We just got in a hurry w/o putting in <a></a>'s. Notice that he puts the </a> at the end of each line, then puts the next <ul> after it.

[Victoria]

This tutorial is exactly what I was looking for. Thank you!

[nemanjadragicevic]

this code helped me a lot!If your code doesn't work, i don't know really...

[adepojuolaniyi]

Mad oh 😂 this guy ehn see the way he made it easy for me, and I have been stressing my self. Bro thanks may God bless you

[johnjones]

This is the best and easiest tutorial on this subject I have seen to date. Great thanks.

[loyaldragon]

At the risk of being called a noob i feel i need to share some information to help others which took me a while to figure out myself.

The fact that he uses the background-size command in this video means that he is using CSS3. I didn't realise until googling this command that this was different to the CSS in my current editing software which is only CSS the original.

Therefore several different commands from this tutorial are not working for me like background size, opacity etc.

Looking through the comments i think that a couple of people have had this issue and been told that it must be them typing it wrong when it could be their chosen editor.

This code in Dreamweaver 8 causes several issues but if i paste the code into text document and open this it works fine. Dreamweaver is clearly locking the page in CSS and ignoring any newer command types.

[xeuik]

Codes vary with the type of program you use. The person recording uses (i forgot what program), but I use Brackets. When editing in CSS, we always need to put a period before anything. So in this video, he uses
"
ul li {
(code)
}
"
but in Brackets, we need to use,
"
.ul li {
(code)
}
"

Hope that helps for anyone complaining about how this doesn't work for them.

[davidnguyen]

Thanks for the tutorial. it is very informative short, sweet and efficient and above all very easy to understand.

[arefix]

Very good Tutorial.
Now I understand how drop down menu works without js.
Thank you vry much.

This is good for novice programmer to understand the basic of drop down menu structure. Very recommended. (thumbs up)