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

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

13407 ratings | 953613 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 (947)
Vivin S (1 day ago)
How to desing an webpage If I link on option like home, it should open a other page how to do it
veasna noeun (2 days ago)
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!
Rayhan Showrov (4 days ago)
tnx man... you are awesome
harish chilukuri (5 days ago)
Did it almost thanks
Graphics (6 days ago)
you are a good man :)
Richard Andrews (7 days ago)
This is awesome , thank yiu and Buddha's Bless you clever techie
kongyui lu (8 days ago)
Thanks you ar video vrry good
Noor Mohammed.N (8 days ago)
iam fresher for this field it can be usefull easily understand thank u bro
Darlene Griffin (13 days ago)
Awesome! So clear and easy to follow. Thank you
blessé (13 days ago)
you are best
ashish kumar (16 days ago)
Shaun Miller (17 days ago)
Great content, will the navigational bar work with all browsers?
Amil Ravji (17 days ago)
Can someone please tell me how to make the Navbar clickable to a new page and Wright things in the new page
WTFGAFS (18 days ago)
EZ Math (19 days ago)
Jimbo Bateman (20 days ago)
Great video. For Everyone...ATTENTION TO DETAIL. Leave One character out...it won't work. Pay attention. Take your time.
Elliria (21 days ago)
Thank you so much for a wonderfully detailed example that was well explained. Nicely done.
shamim Osman (21 days ago)
It is very helpful for me. Thank you so much.
derakhte sabz (23 days ago)
God bless you
Michal Novotný (26 days ago)
Aqib Javed (26 days ago)
awesome but your website says that pay $5 per creation
Emmanuel Samuel (27 days ago)
Notepad ++ ul li ul li not working...
Muhammad Hassan (21 days ago)
Dont use notepad++..there is no demand of it in market...use vs code...it is the best editor for html and css
karan gadaili (28 days ago)
thank yo so much
Nikolas Georgiou (29 days ago)
What's <a> refer to?
Dark Code (26 days ago)
It's an anchor tag, it's used for links... Ex: <a href="place the url here">Example</a>
KADER M (29 days ago)
Thank you guys that was awesome .
Jamie Alkire (1 month ago)
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.
Shiv C Kushawah (1 month ago)
Two approaches: • If width is static (eg 500px) the add- *margin: 0 auto;* Or *margin: 0 auto 0 auto;* • if width is relative (eg 80%) then add margin left & right to make it total to 100% ie- *margin: 0% 10%;* Or *margin: 0% 10% 0% 10%;*
Tisha Nm (1 month ago)
Clear and simple explanation thanks a lot
Ginfio (1 month ago)
Hey is there a way you can set the width to 100% (<u>) ? it messes up when i try to do that.
Christine Aradal (1 month ago)
sorry, i don't get the background-image part. do i need to save the image first? what is that"url"? should I paste the url of the image or....just save the image?
J3fro C (1 month ago)
At 9:10, why did you need to set the 'ul li a' display to Block?
Ginfio (1 month ago)
So easy to follow and understand. i wish other coding videos were like this too. Thanks you.
Nadel S. (1 month ago)
The video was so blurred.
Nikhilesh Verma (1 month ago)
nice job bro
NV2 Noogets (1 month ago)
If you're new at html please don't follow this tutorial.
Adam D (1 month ago)
How do you center the entire menu with it staying how it is?
11swallowedinthesea (1 month ago)
ul { margin: 0px auto; }
anshuman (1 month ago)
Awesome sir... Thanks for this video 👍👍👍 I'll give you like and one share Because you deserve it...
Yusuf Al-Salaam (1 month ago)
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!
Ezeibe Sandra (1 month ago)
nice and simplified.Thank you
Bunnie (1 month ago)
thank u ...i did it.....
mbongeni ngcobo (1 month ago)
My list items are also floating to the left instead of being one after the other going down
__Hepos__ (1 month ago)
thanks you saved my live bro xD
Pakistani Gamer (1 month ago)
did html and css kills everyone whenever he is noob in coding of web development and if he got the point of view so he will be saved from the death point????
SHAWARK XT (1 month ago)
podrias hablar en español
mahmudul hasan (1 month ago)
Soundarya Johnson (1 month ago)
Thank you such an helpful video... For doing my project
Kamal khan (1 month ago)
Please upload the sourc code in txt format
Zahreddine Soualem (1 month ago)
this tuto is very helpful thanks a lot sir
reem hemada (2 months ago)
That's Work Now Thank You.
NikozSoul (2 months ago)
If I make a link in my HTML, to one of the drop-down bars : example "acitivities" it is locked/freezed. Any way to solve this?
Vince Millet (2 months ago)
does it work on html 5?
eheehe (2 months ago)
thank you!
Syed HM Rizvi (2 months ago)
super tutorial, sir
Vishnu singh (2 months ago)
which software are you use can you please give the link
Vishnu singh (2 months ago)
+sridevi peddi i am using windows. but just want to know which software he his use
sridevi peddi (2 months ago)
Vishnu singh he uses HTML 5 for pc or you can use Visual studio code if your on Mac
Faith C Mart. (2 months ago)
Clear, simple, and straightforward video. Thanks Clever Techie!!
Stephen Sijal (2 months 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 (2 months ago)
thank you so much sir for wonderful tutorial
Angelo Bangloy (2 months ago)
what's your app of notepad?
Miloš Panić (2 months ago)
how to center it?
Thrimurthy rao Ardhakula (2 months ago)
Thank you so much Sir for your excellent explaination
Mccullum Nasir (2 months ago)
Well done man !
Ravinder singh (2 months ago)
Awesome video
cheon Lee nacura (2 months ago)
sir please help me how to align center the menu?
Saad Bajwa (2 months ago)
tech z (2 months ago)
It is very easy thanks
Hamid Jan (2 months ago)
Many thanks, sir :-)
Shahin Hazari (2 months ago)
I can't download this image. Please Help Me
Arshid Wani (2 months ago)
Job Done ...thanku dear so much ..... Keep uploading
aj padua (2 months ago)
sir the hover code didnt work pls help me
NoahTraks (2 months ago)
It didnt work fine. I checked everything 4 times. I forgot the ">" to close the link tag 😂
Z-Trends (1 month ago)
Lmao thank you xD I forgot to do the same thing.....Finally worked!
Chris G (2 months ago)
ul li ul li makes disappear my underlists and they dont dropdown
raj singh (2 months ago)
my background image doesnt show
Md.Ebrahim Ali (3 months ago)
really helpful it was
Are Fix (3 months 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 (3 months 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 (3 months 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 (3 months ago)
How do you make these boxes clickable
markYT (3 months ago)
When i hover to the menu items the sub menu items wont display
jerico gaspan (3 months ago)
Nice . this is the Best Tutorial I've ever seen. :) Nice Job Brother
Mohamed Adel (3 months ago)
Thank you very very much
Dasunjith Sameera (3 months ago)
I got it..its awesome.....thanks lot.. so how to create a search engine in a web?
Mahesh Mishra (3 months ago)
https://youtu.be/4pKYysmUnKc Pls watch this amazing nav bar. Hit like and sub pls... He is a new and good youtuber
WorstLoLPlayerNA (3 months 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 (3 months 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 (3 months ago)
How to make him responsible ?
Don Sachin (3 months ago)
U r awesome 👌
Midnight Miner (3 months ago)
I have a problem. Not all bullets are removed and i don't know what i did wrong.
Vimalesha king (3 months 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; }
Vimalesha king (3 months ago)
i created succsessfully yaaaaaaaaaaaaaaaaay. thanks
Thank you 👍
Vimalesha king (3 months ago)
i created without subline that contain a links so not given sub lines thank you so much brother loved from india.
Vimalesha king (3 months 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 (3 months 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 (4 months ago)
How to display linked HTML pages below navigation bar?
NikozSoul (2 months ago)
Did you figure it out? I need same answer
Nitya Srivastava (4 months ago)
Very nice tutorial
bigdogtrist (4 months ago)
lol i felt that uhmmmm at 7:07
Fact World (4 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 (4 months ago)
Can you create a version for Responsive design to view on different device screens?
Jamal Swiss (4 months ago)
I'm also having trouble centering this, any tips?
MALIK (3 months ago)
you have to write "width: 300px, or more. by ul li{
Abdil Parlak (3 months ago)
Put everything in body in a div and give it a margin.
Balázs Egresi (4 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
Anjum Sheraz (4 months ago)
sir ul li a:hover is not working
ASAP PC FIX (4 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 (4 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 (4 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 (4 months ago)
how to open a form after clicking on one of the submenu

Would you like to comment?

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