Here is the actual code, Hope you all like it and you can do changes and make your own awesome Transparent Drop Down Navigation Menu with Submenus with CSS and HTML :) body{ background:url("best1.jpg") center no-repeat; height:100vh; background-size:cover; } .menudropdown1{ width:80%; height:100px; margin:0px auto; } .menudropdown1 ul{ padding:0px; } .menudropdown1 ul li{ float:left; background-color:black; color:white; width:200px; height:50px; line-height:50px; font-size:25px; text-align:center; list-style:none; opacity:0.6; } .menudropdown1 ul li ul{ display:none; } .menudropdown1 ul li:hover > ul{ display:block; } .menudropdown1 ul li:hover{ background-color:#32CD32; opacity:0.9; } .menudropdown1 ul li ul li{ position:relative; } .menudropdown1 ul li ul li ul{ position:absolute; left:200px; top:0px; } USA Ney work
India Pune Mumbai Bangalore Dehradun Delhi kutub minar red fort
Guys, for making this menu to work just add tag inside (when you click on any list and you want to go to another page then add tag inside ) example : USA India
bootstrap jese framework ki madad se esa kiya jata hai lekin simple CSS ki madad se hi ye kam complete ho gaya, normal coding but advanced looking features!! thnx✨✔
Thank you Thapa tecnical for your nice and clear explanation I watched many videos to clear the concept of using positioning property in navigation drop down menu. It is in tutorial you very well conveyed and convinced the idea of using absolute and relative property. I really appreciate your time and effort in making this tutorial. With regards Zahid from Canada
What would i say? Cant understand. I have just achieved your techniques & right now i can create all kind of nav bar. Great Explain. May Allah bless you. From Bangladesh
Nice tutorial,explained very well,i have followed same instruction and got same result..so now I came to know how to make drop down menu easily..thanks and keep it up.
thapa sir, nice explanation and mujhe perfect output mil gaya hai but ek request hai aapse.... aapne submenus create kiya thaa na, DELHI section mein?.. tho kya hum intially ek "ARROW SYMBOL" dikhaa sakhte hain? taaki user ko pata chale ki "DELHI" mein 2 or more submenus hain....can u help me as usual thapa sir?? arrow symbol kaise dikhaa sakhte hain??
Thanks for sharing this video! Very informative and helpful 👍! By the way... where can I download that background image?? It's Beautiful! Any link would be appreciated. Thanks!!!
Sir is drop down menu ko banane k bad ise blogger me kause use kare? I mean blogger k theme pe kahapar paste kare? I'm new please help me. I wanna use it for my blogger website
Aap agr internl css apply kr rhe ho to style tag mein 'type' attribute ka use kro..... . Aur agr aap externl css use kr rhe ho to 'link' tag ka use kriye....
Here is the actual code, Hope you all like it and you can do changes and make your own awesome Transparent Drop Down Navigation Menu with Submenus with CSS and HTML :)
body{
background:url("best1.jpg") center no-repeat;
height:100vh;
background-size:cover;
}
.menudropdown1{
width:80%;
height:100px;
margin:0px auto;
}
.menudropdown1 ul{
padding:0px;
}
.menudropdown1 ul li{
float:left;
background-color:black;
color:white;
width:200px;
height:50px;
line-height:50px;
font-size:25px;
text-align:center;
list-style:none;
opacity:0.6;
}
.menudropdown1 ul li ul{
display:none;
}
.menudropdown1 ul li:hover > ul{
display:block;
}
.menudropdown1 ul li:hover{
background-color:#32CD32;
opacity:0.9;
}
.menudropdown1 ul li ul li{
position:relative;
}
.menudropdown1 ul li ul li ul{
position:absolute;
left:200px;
top:0px;
}
USA
Ney work
India
Pune
Mumbai
Bangalore
Dehradun
Delhi
kutub minar
red fort
France
Australia
Brazil
Thapa Technical thanks Bro for code
Thapa Technical थँक्स
Thapa Technical please can you send the code on my mail id ( sohail_khan2211@outlook.com ) of which is you use for this video
very nice work and every thing is explained in very informative way and not only for this video all videos are very good.
Sir web designing or developing me IIT walo ko pehle liya jata hai or iski jobs bhi south india me hai aesa maine suna hai
Is it true?
Ek no. video yar. itne saare videos dekhe koi tarike se clear nahi kar paye. aap bohot achhe sa bataye ho.
Guys, for making this menu to work just add tag inside (when you click on any list and you want to go to another page then add tag inside )
example :
USA
India
your picture is very nice , plz! give me link where you download plzz
U HAVE SUCH A GREAT KNOWLEDGE...HEADS OFF..
right sir...;-D
it does not go to another page,how to open in same page
Css me tag ko add krna hoga kya?
bootstrap jese framework ki madad se esa kiya jata hai lekin simple CSS ki madad se hi ye kam complete ho gaya, normal coding but advanced looking features!! thnx✨✔
Ab to notepad me coding krne se achha h ki mai engineering chhor du😃.
Thanks to VS Code & Sublime 😃Jaan bacha diya mera.
fantiastic man !!
i think you r the type of teachers i can learn perfectly from ...
thanks dude!! and i hope i can find the other lessons of yours !!!
No one can explain like you. You are best teacher .Thanku soo..... Much 💯
Aapne bahut acche se explain kiya hai har ek cheeze ko,Thanks for this video. 😇😇
Thank you Thapa tecnical for your nice and clear explanation
I watched many videos to clear the concept of using positioning property in navigation drop down menu. It is in tutorial you very well conveyed and convinced the idea of using absolute and relative property.
I really appreciate your time and effort in making this tutorial.
With regards
Zahid from Canada
Waao... You covered very important topic in just one video.. Thanks 👍
Love ❤️ from🇵🇰 Pakistan 🇵🇰
Ohhh God......No one else can explain me better than you ..... tq so much sir for such an amazing explanation.
Bhai bhut bhut acha...
Aap bhut acha expalin krte h..
main issa video ko kb khoj rha tha...
Thankyou so much.
Confuse vala topic tha firbi apne sir bahut mehnat kiya he video banane mr riyali good
Best video for navigation bar....... 🔥🔥🔥🔥👌👌👌👌👌👌👌 well done bro
What would i say? Cant understand.
I have just achieved your techniques & right now i can create all kind of nav bar.
Great Explain.
May Allah bless you. From Bangladesh
Awsme teaching sir....i hve cleared all my doubts reagarding this watching ur vidz. . It waz really helpful to me and hope for others too .
Bro!! You Are the best coder and teacher in the world
It's awesome and the way u explained each line by line 🙏 Best video on Transparent Navigation Menu with Submenu 😘 Thanku so much..
Really :) Thanks, Peter :)
Nice tutorial,explained very well,i have followed same instruction and got same result..so now I came to know how to make drop down menu easily..thanks and keep it up.
wow really nice video with best explained . Bhai ab kabhi nail bhulunga life me... menu list.. thanks
Best tutorial.....very good explanation.....I got the whole tutorial clearly.....thank u so much
You are an Amazing man!
I completed my html page with that
Thank you very much sir
Bhut old video he but sir sekhne ke leya bhut kuch mela ge
Bhai kmaal kr diya...lajawab
this video cleared my that doubt in which I was stuck for around 4 hours
Nice to here this.. Plz share with ur friends too
Thapa is the BEST. Love you man.
sir ji aapne mere project banane me bahoot badi madat ki ,
so thank you #thapatechnical
zbrdst mushkl asan kr di .. Allah kamiyab kry :)
awesome explanation line by line thank u sir.. very much keep posting new videos.....
Perfect Explanation☺️
Congratulations for 180k subscribers
what a nice way... u r teaching way is
very grateful keep it up!
This content and explanation was amazing...
One request sir, pls teach... how to convert this same menu bar into responsive menu bar..
bohot zabardst bhai, ap bohot acha seekhaty ho good;
Very nice.. u r good teacher... thank u.. n make more such tutorials.. will be grateful
It's very good and the way u explained line by line How to Create Drop Down Navigation Menu.
Thanks a lot. the way you explain with practical. very well done. excellent.
You are superb teacher
Hi....Bro Very good Explanation Thank you...
Kindly make one more video about Mega menu with Images. because your explanation is good understandable.
Thanks sir very helpful video in a simple word
Thank u so much for this video
You explain us very easy .
I subscribed your channel.
Very nice video and very easy way to explain
Thanks bro, you helped me a lot with coding given in comment box
Nice explaination with some details
Bahut badiya sir👍
guys listen carefully bw 6:58 to 07:02
you enjoyed
Thank You Thank You Thank You very much sir 🙏🙏🙏
Sir me learnt today how to create transperant drop downs... Thank you so much 🙏🙏 please guide me how to create school website please guide me...
Very well explained 👍
Keep it up
Sir, Your great.Thank u so much for this video
You explain to us very easy
Very good explanation
its really a nice video with nice explained.. thanku
thanku :)
*How can i make navbar fixed even if i clicked and opened another page by clicking on one of the drop down option???*
Awsome Teaching
very nicely explained.
didnt working now
Bro please create a full CSS course A-Z. Because you can understand pretty well.
thapa sir, nice explanation and mujhe perfect output mil gaya hai but ek request hai aapse....
aapne submenus create kiya thaa na, DELHI section mein?..
tho kya hum intially ek "ARROW SYMBOL" dikhaa sakhte hain? taaki user ko pata chale ki "DELHI" mein 2 or more submenus hain....can u help me as usual thapa sir??
arrow symbol kaise dikhaa sakhte hain??
Yea..... jha pr tum delhi likhoge whi pr arrow bna do.....simplee.....😊😊
@@picsplayer7536 thanks for the comment, par, mai mere doubt ko bootstrap ki madad se CLEAR KAR CHUKI HOON ;-D...thanks again n have a good day ;-D
@@reshmar6073 sry agr apko bura lga ho to..😊😊
Thanks for sharing this video! Very informative and helpful 👍!
By the way... where can I download that background image??
It's Beautiful! Any link would be appreciated. Thanks!!!
How many of you are watching in 2020 ?
Thanks for teach step by step very nice header.👍👍 But I still confuse between use of position relative n absolute
Please help by reply.🙏🙏
Ap bhi is duniya main aa gaye hain . theek hai? theek hai? theek hai? :D
thank you sir From Pakistan
❤❤❤❤
Hi loved your way of teaching. Wanted to ask you if you could push your upcoming videos in git. Will be v easy to access.
Janet, Singapore
Nice video. I loved it
I have a doubt. That background image u have used in this tutorial ,
Where it has been stored??
bahut badiya sir ji
Thanks bro, Please subscribe and share with all your friends. It will help them too :)
Very helpful video 👍
bhut hi bdiya bhai gand fadd coding h apki sab smjh aata h
thanks for making my web home page
You are Great sir
Love you sir
Perfect Explanation
Am Pakistani and love you bro
Best tutorial sir.
thanks you so much
Is you like Pune?
Anker tag bhi use kar Liya hota acha samjh Ata
Bro apne background color ko transparent krne ke liye opacity ka use kia, kya isme rgba work nhi karega??
Good explained best video
perfect explain sir..
It was awesome... Thanks for help...
Sir isi tarah se html se
Multy type ka menu style banaiye
Your best bro. 👍
AWESOME VAI 👍👍
Thanks bro. you made it very simple :)
Awesome 👌👌👌
Thanks brother very helpful
Sir is drop down menu ko banane k bad ise blogger me kause use kare? I mean blogger k theme pe kahapar paste kare? I'm new please help me. I wanna use it for my blogger website
Love you broo ☑️☑️
Thank you so much :) Have a great Holidays
hi.. style wala section undo kiya toh program run hota hai.aur agar woh section ho toh nhi run ho raga hai.plz me out this problem
Aap agr internl css apply kr rhe ho to style tag mein 'type' attribute ka use kro..... . Aur agr aap externl css use kr rhe ho to 'link' tag ka use kriye....
kia bat hy bhai zabardst
9:19 se nhi samjh aaya ki kse aapne float kiya mera code nhi rum ho rha hai please dubara btaye. jisme horizontally krna hai.
Thanks. Nice tutorial. Keep it up!
Perfect Explanation ... (Y)
Thanks sir , very helpful video...
Dear Sir kya yah nvbar Responsive hai
Mai thoda confused hu js or php k leke mujhe kya sikhna chahiye plz tell me...
Sir dropdown menu ka tutorial bnaiye desktop pe hover pe open ho ar phone me click pe open ho html css jQuery se
Best 😌thank you so much❤
Very good