HomeХобби и стильRelated VideosMore From: Clever Techie

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

12195 ratings | 874193 views
Hey guys, I'm now using Patreon to share improved and updated video lesson material. For a small fee you can access all the downloadable files from this lesson (source code, icons & graphics, cheat sheets) and everything else included in the video from the Patreon page. Additionally, you will get access to ALL Clever Techie videos in HD format with no ads. Thank you so much for supporting Clever Techie :) Download this video's files here: https://www.patreon.com/posts/inserting-data-20819049 ( You also get access to ALL source code and any downloadable content of ALL Clever Techie videos, as well as access to ALL videos in HD 1080p quality format with all video ads removed! ) `````````````````````````````````````````````````````````````````````````````````````````````` ( Website ) https://clevertechie.com - PHP, JavaScript, Wordpress, CSS, and HTML tutorials in video and text format with cool looking graphics and diagrams. ( YouTube Channel ) https://www.youtube.com/c/CleverTechieTube ( Google Plus ) https://goo.gl/J71p6f - clever techie video tutorials. ( Facebook ) https://www.facebook.com/CleverTechie/ ( Twitter ) https://twitter.com/theclevertechie
Html code for embedding videos on your blog
Text Comments (880)
Vince Millet (1 day ago)
does it work on html 5?
eheehe (2 days ago)
thank you!
Syed HM Rizvi (4 days ago)
super tutorial, sir
Vishnu singh (5 days ago)
which software are you use can you please give the link
Vishnu singh (1 day ago)
+sridevi peddi i am using windows. but just want to know which software he his use
sridevi peddi (1 day ago)
Vishnu singh he uses HTML 5 for pc or you can use Visual studio code if your on Mac
Faith C Mart. (5 days ago)
Clear, simple, and straightforward video. Thanks Clever Techie!!
Stephen Sijal (6 days ago)
we are not professionals please we are learners so kind of things needs explanation to understand what you are doing, and what is the function of a single tag is.
Mosward Vunagi (6 days ago)
thank you so much sir for wonderful tutorial
Angelo Bangloy (8 days ago)
what's your app of notepad?
Miloš Panić (9 days ago)
how to center it?
Thank you so much Sir for your excellent explaination
Mccullum Nasir (12 days ago)
Well done man !
Ravinder singh (13 days ago)
Awesome video
cheon Lee nacura (13 days ago)
sir please help me how to align center the menu?
Saad Bajwa (13 days ago)
BIG THANKS !!!
tech z (13 days ago)
It is very easy thanks
Hamid Jan (14 days ago)
Many thanks, sir :-)
Shahin Hazari (17 days ago)
I can't download this image. Please Help Me
Arshid Wani (17 days ago)
Job Done ...thanku dear so much ..... Keep uploading
aj padua (18 days ago)
sir the hover code didnt work pls help me
NoahTraks (18 days ago)
It didnt work fine. I checked everything 4 times. I forgot the ">" to close the link tag 😂
Chris G (21 days ago)
ul li ul li makes disappear my underlists and they dont dropdown
raj singh (23 days ago)
my background image doesnt show
Md.Ebrahim Ali (24 days ago)
really helpful it was
ULquiourra Schiffer (24 days ago)
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)
Stormy Bear (1 month ago)
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!!!
Jay T (1 month ago)
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 <p>paragraph</p> under it, any idea how to fix this?
Jonathan School (1 month ago)
How do you make these boxes clickable
KillSwitch (1 month ago)
When i hover to the menu items the sub menu items wont display
jerico gaspan (1 month ago)
Nice . this is the Best Tutorial I've ever seen. :) Nice Job Brother
Mohamed Adel (1 month ago)
Thank you very very much
Dasunjith Sameera (1 month ago)
I got it..its awesome.....thanks lot.. so how to create a search engine in a web?
Mahesh Mishra (1 month ago)
https://youtu.be/4pKYysmUnKc Pls watch this amazing nav bar. Hit like and sub pls... He is a new and good youtuber
WorstLoLPlayerNA (1 month ago)
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 <!DOCTYPE>, the <head> tag, the <body> tag, the <meta charset> tag,etc. The <a> tags alone are not proper links. They require an <a href="#">text</a> to become a link. I personally believe that a proper HTML document is imperative to teach people who are here for a guide.
Cristopher Bengson (1 month ago)
Nice video. but when i try to add text on the bottom of the menu. the added text is rearranging. how can i fix or lock the text i added? sorry for my bad grammar.
Amelie Thebault (1 month ago)
How to make him responsible ?
Don Sachin (1 month ago)
U r awesome 👌
Midnight Miner (1 month ago)
I have a problem. Not all bullets are removed and i don't know what i did wrong.
Royale Real Attck's (1 month ago)
index.php:------><html> <link href='style.css' rel='stylesheet' type='text/css'> <body> <p>E-News</p> <ul> <li><a href="hpme.php">Home</a> <ul> <li><a>about home</a></li> </ul> </li> <li><a href="hpme.php">About</a> <ul> <li><a>konw about</a></li> </ul> </li> <li><a href="hpme.php">contact</a> <ul> <li><a>social,map</a></li> </ul> </li> <li><a href="hpme.php">News</a><ul><li><a>to days news</a></li></ul></li> <li><a href="hpme.php">Logout/registration</a><ul><li><a>logout</a></li></ul></li> </ul> <br /> <br> <br> <br> <br> <br> <br> <h1 class="marquee"><span>Letest News At: 1:00 TO 3:00 O'CLCOK Reminder that.</span></h1> <br> <br> <br> <br> <br> <br><br> <br> <br> <br> <br> <br><br> <br> <br> <br> <br> <br><br> <br> <br> <br> <br> <br><br> <br> <marquee>Latest News Is In The India The Extra Ordinary boy That Play only The Games like clash of clans or clash royale That Leave In GUJRAT,bhavnagr,alang "waite for next news,</marquee> </body> </html> style.css:---------> p{ background-color: blue; color: white; width: 100%; height: 70px; font-family: arial; size: 10px; opacity: 0.8; text-align: center; font-size: 70px; cursor: unset; margin: 0px; box-shadow: currentColor; font-style:italic !important; } body{ background: url('image.jpg') no-repeat; background-size: cover; font-family: arial; color:white; margin: 0px; } ul{ margin: 0px; padding: 0px; list-style: none; align-self: center; } ul li{ float: left; width: 339px; height:40px; background-color: black; opacity: 0.6; line-height: 40px; text-align: center; font-size: 20px; margin-right: 2px; align-items: center; } ul li a{ text-decoration: none; color: white; display:block; } ul li a:hover { background-color: darkblue; } marquee{ background-color:black; color:orange; opacity: .5; } ul li ul li{ display: none; } ul li:hover ul li{ display:block; }
Royale Real Attck's (1 month ago)
i created succsessfully yaaaaaaaaaaaaaaaaay. thanks
Thank you 👍
Royale Real Attck's (1 month ago)
i created without subline that contain a links so not given sub lines thank you so much brother loved from india.
Royale Real Attck's (1 month ago)
at end of the video i know about <a>connt</a> use for only hover????????????for green or given an a link?
That's Funny DUDE (1 month ago)
Uhm.. How can i put the menu in center of screen because i tried with <center> but it didn't work. Help Me!
shravya kotha (1 month ago)
How to display linked HTML pages below navigation bar?
Nitya Srivastava (1 month ago)
Very nice tutorial
bigdogtrist (2 months ago)
lol i felt that uhmmmm at 7:07
Fact World (2 months ago)
when i use float:left; it is not going to left like in your video what i am doing wrong plz help :(
LittleKing Archery (2 months ago)
Can you create a version for Responsive design to view on different device screens?
Jamal Swiss (2 months ago)
I'm also having trouble centering this, any tips?
MALIK (1 month ago)
you have to write "width: 300px, or more. by ul li{
Abdil Parlak (1 month ago)
Put everything in body in a div and give it a margin.
Balázs Egresi (2 months ago)
I could do it for the first try. It's not a big deal, just keep focus on what you doin, dear comment section people
GM Technologies (2 months ago)
sir ul li a:hover is not working
ASAP PC FIX (2 months ago)
bro i need your help i have a css website and i am having trouble creating the drop down list on my man nav menu can i send you the whole website? Mind you i am nowhere near an expert
ASAP PC FIX (2 months ago)
i want to add a dropdown list to services when i do it , the menu gets all out of whack
ASAP PC FIX (2 months ago)
this is my html code <nav class="header-nav-wrap"> <ul class="header-main-nav"> <li class="current"><a class="smoothscroll" href="#home" title="intro">home</a></li> <li><a class="smoothscroll" href="#about" title="about">About</a></li> <li><a class="smoothscroll" href="#services" title="services">services</a></li> <li><a class="smoothscroll" href="#download" title="download">Download</a></li> </ul>
Sabiya shaikh (2 months ago)
how to open a form after clicking on one of the submenu
Jamal Swiss (2 months ago)
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.
Jamal Swiss (2 months ago)
+Sabiya shaikh I solved this with *display: table* on the top li
Sabiya shaikh (2 months ago)
can you send the code
1GuyMinuro (2 months ago)
does notepad not work with css?
Ariel Ebale (2 months ago)
my hover doesnt work.
Mangualam Cany (2 months ago)
Very useful ! Very understandable ! Thank you very much !
Bizhan Bazhirov (2 months ago)
Hey can someone help me please, when I set float: left; all my element stands in one row, secondary ul should be under the primary ul but they stay on 1 line :c
sunil Kumar (1 month ago)
Hey Your problem solve or not
ElecKtro Vlog Sciene (2 months ago)
Please give me the nature . jpg file because i can't find it on the internet.
Jester Lagbas (2 months ago)
why i can't connect my css style sheet to my index.html? i want to input the image for background but won't pop out this is the exact code that you made sir but when i browse the this html codes it's only white background and no appear of any of i type body { backgroud: url('digital-life.jpg') no repeat; backgroud-size: cover; font-family: Arial; color: white; } ul { margin: 0px; padding: 0px; list-style: none; } ul li { float: left; width: 200px; height: 40px; backgroud-color: black; opacity: .8; line-height: 40px; text-align: center; font-size: 20px; } ul li a{ text-decoration: none; color: white; display: block; } ul li a:hover { backgroud-color: green; }
adel mardini (2 months ago)
i need the code please
احمد صبحي (2 months ago)
you dont add in html :head and body .why? i think its not work as we learned
iTechGaming (2 months ago)
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 :)!
Anku mehra (2 months ago)
which background : url('......."') url name is creating prob plz help
Sklep Daniela (2 months ago)
why u are not using classes at all?
ANTOND. (2 months ago)
*For all who want to have it in the middle!* Put _<ul>_ into _<div class="table">_ And add this to your style.css - .table { display: table; margin: 0 auto; }  *That's all ;)*
Developers Era (2 months ago)
take background: rgba(0,0,0,0.5); and take a transparency
bouyahi oussema (2 months ago)
thanks you ,perfect explication Please provide us a java script tutorial from A to Z
uau!
Rimantas Danilevicius (2 months ago)
very useful tutorial
Tamim Rayan (2 months ago)
Great 😍😍😍
White City (3 months ago)
so much thanks
Ro Nin (3 months ago)
how do i make the whole menu a little bit towards bottom?
Maciej Myśliński (3 months ago)
Nice! Thanks a lot!
manas infinity (3 months ago)
thanks brother....
Midul Goswami (3 months ago)
It's awesome, I've created the same and it's really attractive. It's really a best video for beginner. thank you so much for this video.
Amine Amigo (3 months ago)
thanks man ;)
Isis Chan (3 months ago)
wow thanks for that.. another helpful vid.. thank you sooooo much!
BABLU KASAI (3 months ago)
Haha u made this drop-down things very simple bro.. Thanks
Awesome. Thank you !
Emilia Pamparau (3 months ago)
omg your the best...
Mr. Singh (3 months ago)
what else are you using instead of notepad++
User 97 (3 months ago)
don't know this editor because looks a better one than Notepad but not so much advanced, try Atom Edtiro,Brackets Editor or Visual Code.
Rizos (3 months ago)
So we dont have to imbed the navigation bar inside a <div> ?
Future Ethics (3 months ago)
https://youtu.be/wYAYLhVbpW0
HardcoreWeeaboo (3 months ago)
Thx for this! Worked perfectly:)
Miłosz Kłaput (3 months ago)
This is completely not responsive solution for navbar :/
youssef houssam (3 months ago)
thank you so much so much mr genius, this video really really healped me for my programming project and thank you for your help and effort. appreciate it
VIJAYA RAHAVAN (3 months ago)
Excellent
Gokula Krishnan (3 months ago)
I used notepad++. i got ...
Cat Horn (2 months ago)
Better change to visual studio code
Pixel_ (3 months ago)
What editor are you using?
Chayanon Doksanthia (3 months ago)
Thanks a lot it's great tutorial.
John Cole (3 months ago)
Awesome video Bro!, I subbed within the first 2 mins of watching Keep up the good work!
AdiTya Dev (3 months ago)
Awesome
Rizki Pasaribu (3 months ago)
tutorr kontolll..
Mitarth Soni (3 months ago)
Thats amazinggggg
Haider Ali (3 months ago)
Love U sir the way U explain is awesome😘😘😘
Vijaya Morusu (3 months ago)
S I got it... But ul li ul li{ display:none; } /*is not working in my system
Roland Nathaniel Borja (3 months ago)
Malupet ka talaga Clever Techie. Sana marami ka pang matulungang IT Students.
SpacierPanda (4 months ago)
thank you for the tutorial
Ivan [IwKe] (4 months ago)
thanks !

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.