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

[@abdulrazaq1609]

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

[@mastercode7851]

اشبك يواد

[@stargk2445]

kzbin.info?o=U&video_id=8aLpBMX1Whc

[@KimliangMich]

So how about this tutorial: kzbin.info/www/bejne/moazq6Oml8uqjas

[@nour3660]

@@mastercode7851 هههههههه

[@mastercode7851]

@@nour3660 يااح صار للكومنت اربع سنين

[@ronanmatrix]

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

[@stormybear4986]

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

[@adepojuolaniyi2928]

Exactly. This guy knows what he is doing

[@ssigitas69]

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

[@FreeFire-yi1kq]

😂lol

[@FreeFire-yi1kq]

Developer only knows😂

[@xopowo1979]

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!

[@veasnanoeun235]

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

[@ecoatings192]

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

[@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.

[@Moodboard39]

Interesting. Visual code use a period

[@ezgirlmamaslove4637]

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-xc9lp]

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

[@KGVirus]

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

[@javatmz]

Follow for Follow ;)

[@Moodboard39]

Assuming it creates a linkm

[@nemanja084dragicevic4]

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

[@chinweezeamama7127]

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

[@joemiller2097]

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

[@19Victoria99]

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

[@RadhaRadha-ug7yv]

Bro it's very useful to me .. As I am lockdown in my hose For past 17 days due to Covid-19 ....😭 I am using your channel to study my CSS and HTML courses... Thanks bro 😁😁😁

[@adepojuolaniyi2928]

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

[@xela6ix100]

Charley me too😂

[@clevertechie]

Glad to hear that

[@theroomtheroom6513]

I watched a few tutorial in my mother lang. They werent clear. You explained in a great way. Thanks for the video.

[@theroomtheroom6513]

I wondered, i was applying to display: none property to ul li ul element. Was it posible in that way or did i have to select the last li item? Thanks.

[@loyaldragon2009]

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.

[@drakZes]

Hi, what must you add to the code to get those commands to work. I have added CC3, but it still doesn't work

[@equilibriumwell]

Hey hows it going? I am relatively new to coding and i think that I am having the problem that you are speaking of. So my question to you is what commands should i use to get my background image to show? I am using visual studio code and when i try to put the image on the html file itself, i dont have any problems but if i try to link it through (exactly how he does) i assume the commands arent recognized.

[@yeye7228]

Dreamweaver is an engine and it needs updates. Your browser is also an engine but its updated that's why it is working fine.

[@johnjones764]

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

[@davidnguyen3684]

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

[@eliendongo9566]

this is the best tutorial i have seen for dropdown menu

[@druick7892]

I'm having problem with ul li ul li {display: none;} still displays..

[@arefix3725]

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)

[@Blaze-uj7bg]

can u help im having trouble in my drop down when i hover all the sub show

[@neerajmahapatra5239]

i don't know some people are unable to make it but this your tutorial is perfect it 101% worked for me !!!!! thanks>>>

[@jamalswiss715]

This looks really good on my website compared to my previous code. Auto responsive as a bonus. How can I make the popouts not push down other elements? I tried *position: absolute* on the ul li ul li, but then the sub meny items stacked on top of one another.

[@sabiyashaikh9296]

can you send the code

[@jamalswiss715]

@@sabiyashaikh9296 I solved this with *display: table* on the top li

[@LewysC]

@@jamalswiss715 Works nicely thanks :D

[@jakebrenneman5132]

Excellent video. Not too much info, not too little. Piece by piece. COOL information. Well done, sir.

[@janlucarind8863]

Niceee. Best HTML Video

[@itplanet2051]

You should choose this as your career. how many old you are you are a good web page maker. KEEP IT UP!!

[@t.z.2743]

When I go hower my drop down menu the list items show up next to each other ,instead being under each other. What should I do?

[@shanzaykhan8465]

same

[@misteralfie]

add position: absolute

[@subcount3528]

use "display:block;"

[@happyness8612]

@@misteralfie where ?

[@happyness8612]

@@subcount3528 put it where ?

[@alexwithtech]

Nice. I don't understand all of them because I'm a Vietnamese and my english is so bad 😃. It really helps so much. Thanks bro!

[@CrazyMantrii]

I am at the basic level of HTML and CSS and I am amazed... he did not use the dropdown in the coding.

[@CodeBlocksOfficial]

he is making it invisible at 10:05, at 10:55 he is using :hover to make the navigation appear when when you hover over it

[@emimounana8044]

O

[@CrazyMantrii]

@@landonarturo3952 Chahiye

[@darinelcigarroa5833]

Amigo hablo español y aun que no entiendo del todo lo que dices tu vídeo fue más claro de entender que los tutoriales de español que he visto, grande

[@jamalswiss715]

I'm also having trouble centering this, any tips?

[@abdilparlak]

Put everything in body in a div and give it a margin.

[@MALIK-bc4tn]

you have to write "width: 300px, or more. by ul li{

[@stormybear4986]

Excellent tutorial!! I followed along and built it with you on the first go! This is how a tutorial should be done! Rock on, Big Dog!! BIG THUMBS UP!!!

[@DarioBorovac]

how do you center the whole navigation menu horizontally?

[@romavolkov]

I think try not using the float:left; and it should by default be horizontal

[@codebitcookie8053]

in my case like i commented above: just change: body { background: url('nature.jpg') no-repeat; background-size: none; margin-left: 10%; } the margin-left: 10%; will make it. if you have a bigger screen you may have to play with the number. Thanks.

[@DarioBorovac]

blitzer it works! Cheers

[@romavolkov]

oh lol for some reason i was thinking your asking how to make it vertically. haha

[@turboromy]

This won't be exactly what you wanted. I made main menu width 20% of the web browser width like ul li { width: 20;}, then ul li:hover ul li { width: 100%; } to take 100% of parent's width. End result is menu takes up all width. Don't forget margin and padding 0 at body to remove gaps.

[@muhammedosinubiadebanjo4762]

This is wonderful, you make it look very easily, other tutorial that I've watched I could not understand it but yours I understood it immediately... Thumps up bro... I am subscribing straight away...

[@theangryghost2086]

how do i center this? I want center it but i cant.

[@eduardofuentes9728]

with that code, you can't because you're using float and that is one of the things it does

[@nightowl859]

Any ideas how to center it?

[@dimitridehouck9506]

put it in a DIV and center that div.

[@asadabbas947]

write body{ margin-left: 60px; } it works

[@steel6923]

@@ANTOND. Put a tag around the whole code, and in the css use margin-left on the

[@soumyaranjanpradhan1325]

sir ,why we used overflow:hidden property in tag in creating navigation bar

[@curios_bot]

make sure that there is no space between semi column and HOVER ul li: hover ul li (dont type like this) ul li:hover ul li( type like this) then it will work!! ul li:hover ul li{ display: block; }

[@gamingwithus_yt5109]

Dude spaces are ignored they don't matter I am a prpfessional web developer.

[@sallybugs1695]

@@gamingwithus_yt5109 spaces do matter trust me but not all the time

[@frenchproductions-v6w]

20 minutes i spent troubleshooting this. . You sir!! Thank you!

[@Moodboard39]

@@gamingwithus_yt5109 it do dimwit

[@virkSugarcane_farming]

Hello Sir, I am a new in the field of HTML & CSS but It is a very helpful information that is provided by you, Thanks a lot..

[@floriansalzer8513]

But how to get the Menu in the middle of the display? I used text-align:center and center but it had not work?!

[@gautamd36]

use line-height

[@asadabbas947]

write margin-left: 60px; in the body it works i tried it.

[@marcinkuruc8916]

margin: auto works better

[@shiktoahmed5746]

margin: auto;

[@Chahmadu]

Use margin left,right,height

[@joecolucci5185]

Spot on! Audio is excellent and steps are accurately narrated, show me more!

[@lemurusbalok2644]

People for whom this doesn't work: One possibility is you did a syntax error which is unfortunately interpreted by the browser without error. There should be NO SPACE between ':" and "hover' in: ul li:hover ul li{ .... }

[@Este819]

thank you so much!!! I was looking for reason why my "hover" doesn't work:)

[@rafaeljanaguite9118]

Pls help I can’t add the background picture for some reason. I did everything correctly but it won’t display it EDIT: sorry bout that. I just forgot to do a “ on stylesheet

[@vijayakrishnaherlep]

tqs dude

[@mohangr3703]

Thank you so much

[@nithinsabniveesu9664]

Tq for the help...

[@babyprintz]

Clear, simple, and straightforward video. Thanks Clever Techie!!

[@odunladeoluwaseun7880]

Good job sir. how do I make this responsive?

[@clevertechie]

I've created a video on how to exactly that.

[@sunjeevkonduru7418]

Can you share the link for how you make this responsive?

[@sardarmuhammadqasir6032]

first you make a pages then write link in home page

[@I_am_actually_THE_PRO]

just use % in lace of pixels on height ,width

[@amreshkumarsahu8742]

odunlade oluwaseun how can I use this in blogger??? Plzz reply

[@AbdurRahman-kx2mu]

not gonna lie, your presentation are incredible..understandable and easy to understand...TyVm

[@deshanrathnayake2737]

This is awesome , thank yiu and Buddha's Bless you clever techie

[@TishTalksTech]

THE BEST INSTRUCTION OF ALL TIME! I FEEL LIKE I JUST GOT MY WHOLE LIFE BACK!!!!!

[@N77-r7f]

how do i add links to the boxes inside so i can actually click on them

[@daphne8624]

Links are added quite easily. Menu your link to the right html page is added at the #. So for intance if your page is called example.html it should look like this. Sub Menu 1

[@abs1792]

after seen a lot of tutorial, finally got an easy tricks for create sub menu......thanks lot

[@blankaj8903]

nice. No matter how many times I try I always fail :/

[@lahxo4593]

gracz pl m2😿

[@clevertechie]

Awwww I'm sorry you guys are having difficulties, what exactly are you having a problem with?

[@pavanpraneeth4659]

when i hover along from left to right its ok....but when unable to click on bottom list

[@loftysteps]

nice. but no mater how many times i try it always show me weird result. even i copied everything you typed it still fail. can you post another vedio . thanks

[@loftysteps]

nice. but no mater how many times i try it always show me weird result. even i copied everything you typed it still fail. can you post another vedio . thanks

[@sacrajah]

at 9:23 , it is " ul li :hover{background-color:green;}" instead of " ul li a:hover{background-color:green}; rest comes to halt after ul li ul li { display:block;}.

[@aaronvargas9166]

Bro, my navigation bar is not aligned to it's sub bar.

[@muneebwarraich4699]

same pro bro hae u get any solution for that?

[@aaronvargas9166]

Yah, it happens that I got 1 excess curly brace.

[@muneebwarraich4699]

iam not understanding u bro...kindly explain me what was the prob

[@muneebwarraich4699]

welcome HOME PRODUCTS Electronis Furniture Cosmetics Television Mobile Phones SERVICES Electronis Furniture Cosmetics Television Mobile Phones CONTACTS

[@muneebwarraich4699]

can u plz find out the prob in my code above

[@gigodoxa625]

you are so great! blessings on you. I followed everything and i feel now like a professional programmer! keep on the good work!

[@drdespicable2079]

Can you do a tutorial using notepad?

[@theellister3367]

Despicable Minion it's the same just less practical

[@jakubb8472]

just type the same thing

[@sardarmuhammadqasir6032]

this is also capable on notpad

[@Moodboard39]

Why notepad lol 😂

[@cardinaldom574]

Wow! I really enjoyed your simple and easy tutorial. Dude, you are the teacher. Keep it up.

[@LikangelOfficial]

Great video. Would you be able to advise why the background for all sub navgation pages aren't connecting when I hover? And why they are changing size when i hover? Thanks

[@Ginfio]

So easy to follow and understand. i wish other coding videos were like this too. Thanks you.

[@adilsonmartins1564]

best class I ever had on drop down menu. Thank you

[@Prash1c]

Why is it that when you move the margin, padding, and width properties from ul li to ul li a, the menu and submenu is floated to left so all items are on the same line when float:left is set in ul li?

[@naiemmanuelmollel9583]

In 2019 Your still the best

[@harmuzulhaque3045]

Excellent!, Excellent!, Excellent! I've never seen like this technic ever. I hope you'll make videos more & more like this. Thank you.

[@clevertechie]

More to come!

[@JessePH]

Brilliant tutorial! Simple yet useful. Im inspired to create more on my channel. Thanks Clever Techie

[@anildanes2807]

Understandable! That's a best tutorial a have seen so far..

[@Y-Al-Salaam]

Excellent teacher! Thank you! Hope you continue teaching coding to beginners like me, I really enjoyed your lesson, hope to sit in your class again & again!

[@adnansmove8597]

So Easy This is Best navigation tutorial i ever seen... So So Awesome.. This Video Most Important For Html css Beginners

[@chandanprajapati1127]

Hello....! Clever techie. Your video is so impressive to improve our skill in this field. It's very helpful for me. Thanks

[@discoversweden9282]

It was absolutely no doubt the easiest one to learn.

[@yashkummar]

Thanks for your video.. I am getting back into webdesign and retraining. You have explained very well and straight to the point. :)

[@vuk3316]

Literally the best simple tutorial out there

[@BrunoOliveira-tj5xw]

just here to say that it helped me in my graduation final work. thanks

[@grizzly3260]

Im trying to do this in visual studio,I have to use that as a school asigned project. However when i get to the step where i have to use CSS the site does not change at all.I have the first part working with the normal HTML, but the backround i try to use does not work.

[@sw3ettouch]

So we dont have to imbed the navigation bar inside a ?

[@mathieujouvensal7372]

honestly this video was super helpful for my school project. thanks :)

[@RhythmLove7]

This was great! Especially the part here you explain the css tree structure (ul li ul li) very easy to understand and will help a ton i the future! Thank you!

[@nokwethembamthembu1019]

the cleverest techie around

[@pizzaroneee]

Can i put the code in notepad? It will be the same right? 😁

[@noormohammed.n5922]

iam fresher for this field it can be usefull easily understand thank u bro

[@javatmz]

Bro if u want help ;)

[@tejeswarv450]

Awesome...thank u for explaining step-by-step approach and display step by step outputs.....you are great..keep doing sir

[@Bald_Eeagle]

bro you make things look easy, i love the way you flow in coding my broer awesome video!

[@ursustheminor8096]

Hey! Finally I understood a litle css. Thank you! I'm just learning html, but i think css can be realy helpfull!

[@Camel_Herder]

absolute brilliant, did it at first attempt.

[@fextuccini6224]

I dont like videos but I liked this one This is spectacular

[@AnotherHaloReviewer]

Hey thanks for this video but I have a question. The navigation works very well, although when the dropdown comes down as I scroll through it it stops before the last dropdown option due to a paragraph under it, any idea how to fix this?

[@aayushsharma7576]

thanks brother it helped me a. lot i was just thinking that i have just learned html but i zero at coding you helped me a lot

[@BoxaBole]

Best and easiest way to make it, been through some other ways, this is the easiest for sure!!! great job !

[@drorkatzir]

Clever Techie thank you very much. Its was very easy to follow and now i have my first css drop down menu :)

[@md.istiakzaman3526]

Best Easy way to Create Dropdown .. Thanks Sir

[@gilcimarneves1657]

I am impressed with the didacticity of this material. I am so gratefull.

[@kodewala]

This is so amazing, you have shown this so simply..! Great job!!!

[@itech40]

Hello, I have questions. Why do you set width and height in px at 6:55 how is that going to be able to be fully responsive? Also, why do you set it to block 9:11? It was still an awesome tutorial :)!

[@mtljx]

I appreciate you trying to help others with a guide as such, I believe your intentions are definitely good, however, I've noticed many flaws in your HTML. Now I may be wrong and this is an older version of HTML, but from good practice, you are missing the , the tag, the tag, the tag,etc. The tags alone are not proper links. They require an text to become a link. I personally believe that a proper HTML document is imperative to teach people who are here for a guide.

[@Moodboard39]

Well said .How he not do that .. Dont get it . Just for fun ?!

[@aidapopa3686]

The float left its not working on my computer

[@zannakristal3754]

Wow Awesome...so beautiful and the control of the hover...it’s fascinating Thankyou... I love transparency...

[@relax247alldayandnight]

This was a great tutorial, but how do you align the whole drop down menu to the center? Right now it is to the left.

[@gabyaguilar741]

,this is very helpful..now that i have online class because of corona virus..

[@iyaashahmed9025]

i love the way you explain.. good teacher!

[@clevertechie]

Glad to hear that!

[@sibanimaharana5138]

One of the most helpful video thank you so much sir 🙏☺️