Transparent Drop Down Menu with Submenus in CSS and HTML (Hindi)

Поделиться
HTML-код
  • Опубликовано: 3 янв 2025

Комментарии • 249

  • @ThapaTechnical
    @ThapaTechnical  7 лет назад +39

    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

    • @sachinhd517
      @sachinhd517 7 лет назад

      Thapa Technical thanks Bro for code

    • @ravindrapawar2615
      @ravindrapawar2615 6 лет назад

      Thapa Technical थँक्स

    • @khansohail8859
      @khansohail8859 6 лет назад

      Thapa Technical please can you send the code on my mail id ( sohail_khan2211@outlook.com ) of which is you use for this video

    • @himanshushekhar3304
      @himanshushekhar3304 5 лет назад

      very nice work and every thing is explained in very informative way and not only for this video all videos are very good.

    • @vishalkapoor66
      @vishalkapoor66 5 лет назад

      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?

  • @pjverma86
    @pjverma86 4 года назад

    Ek no. video yar. itne saare videos dekhe koi tarike se clear nahi kar paye. aap bohot achhe sa bataye ho.

  • @ThapaTechnical
    @ThapaTechnical  7 лет назад +4

    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

    • @abidhanif9271
      @abidhanif9271 6 лет назад

      your picture is very nice , plz! give me link where you download plzz

    • @chaturdimag
      @chaturdimag 6 лет назад

      U HAVE SUCH A GREAT KNOWLEDGE...HEADS OFF..

    • @reshmar6073
      @reshmar6073 6 лет назад

      right sir...;-D

    • @manneprakash3366
      @manneprakash3366 6 лет назад

      it does not go to another page,how to open in same page

    • @DEEPANSHU_NAG
      @DEEPANSHU_NAG 5 лет назад

      Css me tag ko add krna hoga kya?

  • @naitikkathiriya
    @naitikkathiriya 3 года назад +1

    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✨✔

  • @himanshuraj254
    @himanshuraj254 4 года назад

    Ab to notepad me coding krne se achha h ki mai engineering chhor du😃.
    Thanks to VS Code & Sublime 😃Jaan bacha diya mera.

  • @learnAndfun101
    @learnAndfun101 6 лет назад +6

    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 !!!

  • @deeptitrivedi8174
    @deeptitrivedi8174 2 года назад

    No one can explain like you. You are best teacher .Thanku soo..... Much 💯

  • @anshikasingh4289
    @anshikasingh4289 3 года назад

    Aapne bahut acche se explain kiya hai har ek cheeze ko,Thanks for this video. 😇😇

  • @ZahidHussain-pr4hg
    @ZahidHussain-pr4hg 4 года назад +2

    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

  • @nowalzaman7792
    @nowalzaman7792 5 лет назад +1

    Waao... You covered very important topic in just one video.. Thanks 👍
    Love ❤️ from🇵🇰 Pakistan 🇵🇰

  • @shivanigupta6559
    @shivanigupta6559 4 года назад

    Ohhh God......No one else can explain me better than you ..... tq so much sir for such an amazing explanation.

  • @nikhilagarwal2131
    @nikhilagarwal2131 4 года назад

    Bhai bhut bhut acha...
    Aap bhut acha expalin krte h..
    main issa video ko kb khoj rha tha...
    Thankyou so much.

  • @arpitsoni7785
    @arpitsoni7785 5 лет назад

    Confuse vala topic tha firbi apne sir bahut mehnat kiya he video banane mr riyali good

  • @A_userFrom_heaven.
    @A_userFrom_heaven. 3 года назад +1

    Best video for navigation bar....... 🔥🔥🔥🔥👌👌👌👌👌👌👌 well done bro

  • @ashikurrahman5729
    @ashikurrahman5729 3 года назад

    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

  • @picsplayer7536
    @picsplayer7536 6 лет назад +3

    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 .

  • @atharvaenterprise1088
    @atharvaenterprise1088 4 года назад

    Bro!! You Are the best coder and teacher in the world

  • @peterspiderman7093
    @peterspiderman7093 7 лет назад +4

    It's awesome and the way u explained each line by line 🙏 Best video on Transparent Navigation Menu with Submenu 😘 Thanku so much..

  • @garimatomar2590
    @garimatomar2590 6 лет назад

    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.

  • @sachinhd517
    @sachinhd517 7 лет назад +4

    wow really nice video with best explained . Bhai ab kabhi nail bhulunga life me... menu list.. thanks

  • @sujitroy8619
    @sujitroy8619 4 года назад +1

    Best tutorial.....very good explanation.....I got the whole tutorial clearly.....thank u so much

  • @pramod3643
    @pramod3643 5 лет назад +1

    You are an Amazing man!
    I completed my html page with that
    Thank you very much sir

  • @sagarkashyaptour
    @sagarkashyaptour 4 года назад

    Bhut old video he but sir sekhne ke leya bhut kuch mela ge

  • @Aman-vu3ss
    @Aman-vu3ss 4 года назад +1

    Bhai kmaal kr diya...lajawab

  • @sachinnegi7188
    @sachinnegi7188 5 лет назад

    this video cleared my that doubt in which I was stuck for around 4 hours

    • @ThapaTechnical
      @ThapaTechnical  5 лет назад

      Nice to here this.. Plz share with ur friends too

  • @usmaniq1965
    @usmaniq1965 4 года назад

    Thapa is the BEST. Love you man.

  • @vikasandroidgamer
    @vikasandroidgamer 5 лет назад

    sir ji aapne mere project banane me bahoot badi madat ki ,
    so thank you #thapatechnical

  • @ridazehra2469
    @ridazehra2469 5 лет назад

    zbrdst mushkl asan kr di .. Allah kamiyab kry :)

  • @randomytchannel-nepal
    @randomytchannel-nepal 4 года назад

    awesome explanation line by line thank u sir.. very much keep posting new videos.....

  • @shrutinamdeo5156
    @shrutinamdeo5156 4 года назад +3

    Perfect Explanation☺️

  • @rumanzahid6671
    @rumanzahid6671 4 года назад

    Congratulations for 180k subscribers

  • @saimkhan7426
    @saimkhan7426 3 года назад

    what a nice way... u r teaching way is
    very grateful keep it up!

  • @shiveesinghal7985
    @shiveesinghal7985 5 лет назад +1

    This content and explanation was amazing...
    One request sir, pls teach... how to convert this same menu bar into responsive menu bar..

  • @zeeshanweb
    @zeeshanweb 6 лет назад

    bohot zabardst bhai, ap bohot acha seekhaty ho good;

  • @rifatbeigh1131
    @rifatbeigh1131 5 лет назад

    Very nice.. u r good teacher... thank u.. n make more such tutorials.. will be grateful

  • @talal971
    @talal971 6 лет назад

    It's very good and the way u explained line by line How to Create Drop Down Navigation Menu.

  • @anupekka8437
    @anupekka8437 4 года назад

    Thanks a lot. the way you explain with practical. very well done. excellent.

  • @learnprogrammingwithproject
    @learnprogrammingwithproject 5 лет назад

    You are superb teacher

  • @zulfequarmohammed2300
    @zulfequarmohammed2300 6 лет назад

    Hi....Bro Very good Explanation Thank you...
    Kindly make one more video about Mega menu with Images. because your explanation is good understandable.

  • @awaissaleem721
    @awaissaleem721 2 года назад

    Thanks sir very helpful video in a simple word

  • @kirtipatidar5343
    @kirtipatidar5343 5 лет назад +1

    Thank u so much for this video
    You explain us very easy .
    I subscribed your channel.

  • @scarynight05
    @scarynight05 4 года назад

    Very nice video and very easy way to explain

  • @epkulde
    @epkulde 4 года назад

    Thanks bro, you helped me a lot with coding given in comment box

  • @pramodkute8127
    @pramodkute8127 2 года назад

    Nice explaination with some details

  • @trendyFacts8
    @trendyFacts8 3 года назад

    Bahut badiya sir👍

  • @RAHULCHOUHAN-ud6tl
    @RAHULCHOUHAN-ud6tl 6 лет назад

    guys listen carefully bw 6:58 to 07:02
    you enjoyed

  • @uniquelivestreamer6484
    @uniquelivestreamer6484 4 года назад +1

    Thank You Thank You Thank You very much sir 🙏🙏🙏

  • @deepahosur4893
    @deepahosur4893 6 лет назад

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

  • @sanketagarwal4619
    @sanketagarwal4619 5 лет назад

    Very well explained 👍
    Keep it up

  • @ameerkhan4293
    @ameerkhan4293 5 лет назад +3

    Sir, Your great.Thank u so much for this video
    You explain to us very easy

  • @jhandkarao9908
    @jhandkarao9908 3 года назад

    Very good explanation

  • @ShivamGupta-kk5zk
    @ShivamGupta-kk5zk 7 лет назад +2

    its really a nice video with nice explained.. thanku

  • @BharatReacts229
    @BharatReacts229 3 года назад +1

    *How can i make navbar fixed even if i clicked and opened another page by clicking on one of the drop down option???*

  • @manishjoshi6650
    @manishjoshi6650 4 года назад

    Awsome Teaching

  • @priyanshuchand490
    @priyanshuchand490 5 лет назад +1

    very nicely explained.

  • @ashermanzoor
    @ashermanzoor 3 года назад +1

    didnt working now

  • @mohammedasad283
    @mohammedasad283 6 лет назад

    Bro please create a full CSS course A-Z. Because you can understand pretty well.

  • @reshmar6073
    @reshmar6073 6 лет назад +1

    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??

    • @picsplayer7536
      @picsplayer7536 6 лет назад +1

      Yea..... jha pr tum delhi likhoge whi pr arrow bna do.....simplee.....😊😊

    • @reshmar6073
      @reshmar6073 6 лет назад +1

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

    • @picsplayer7536
      @picsplayer7536 6 лет назад +1

      @@reshmar6073 sry agr apko bura lga ho to..😊😊

  • @patriayvida4209
    @patriayvida4209 3 года назад +1

    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!!!

  • @hanutsai1102
    @hanutsai1102 4 года назад +1

    How many of you are watching in 2020 ?

  • @makhurana
    @makhurana 3 года назад

    Thanks for teach step by step very nice header.👍👍 But I still confuse between use of position relative n absolute
    Please help by reply.🙏🙏

  • @ghulammujtaba2905
    @ghulammujtaba2905 5 лет назад

    Ap bhi is duniya main aa gaye hain . theek hai? theek hai? theek hai? :D

  • @virus6074
    @virus6074 2 года назад

    thank you sir From Pakistan
    ❤❤❤❤

  • @janetdsouza3526
    @janetdsouza3526 5 лет назад

    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

  • @ANANDKUMAR-0807
    @ANANDKUMAR-0807 4 года назад

    Nice video. I loved it
    I have a doubt. That background image u have used in this tutorial ,
    Where it has been stored??

  • @rajeshchoudhary2637
    @rajeshchoudhary2637 6 лет назад

    bahut badiya sir ji

    • @ThapaTechnical
      @ThapaTechnical  6 лет назад

      Thanks bro, Please subscribe and share with all your friends. It will help them too :)

  • @creativeaayush
    @creativeaayush 4 года назад

    Very helpful video 👍

  • @rahulpandat7912
    @rahulpandat7912 3 года назад

    bhut hi bdiya bhai gand fadd coding h apki sab smjh aata h

  • @astitvagamerz3131
    @astitvagamerz3131 4 года назад

    thanks for making my web home page

  • @dhamakaoffer7883
    @dhamakaoffer7883 2 года назад

    You are Great sir
    Love you sir

  • @hinamalik9718
    @hinamalik9718 3 года назад

    Perfect Explanation

  • @advanbhatti6063
    @advanbhatti6063 2 года назад

    Am Pakistani and love you bro

  • @webgyan5209
    @webgyan5209 2 года назад

    Best tutorial sir.

  • @funnyvideoswithYogya
    @funnyvideoswithYogya 2 года назад +1

    thanks you so much

  • @sachinmule2811
    @sachinmule2811 3 года назад +1

    Is you like Pune?

  • @TraderBoy-e3t
    @TraderBoy-e3t 9 дней назад

    Anker tag bhi use kar Liya hota acha samjh Ata

  • @jitenderverma5103
    @jitenderverma5103 5 лет назад

    Bro apne background color ko transparent krne ke liye opacity ka use kia, kya isme rgba work nhi karega??

  • @yoyorubel9642
    @yoyorubel9642 7 лет назад

    Good explained best video

  • @ah_raihan
    @ah_raihan 4 года назад

    perfect explain sir..

  • @mixuse3276
    @mixuse3276 3 года назад

    It was awesome... Thanks for help...

  • @InfoTechandResearch
    @InfoTechandResearch 5 лет назад

    Sir isi tarah se html se
    Multy type ka menu style banaiye

  • @oyehan834
    @oyehan834 5 лет назад

    Your best bro. 👍

  • @sayandutta2669
    @sayandutta2669 5 лет назад

    AWESOME VAI 👍👍

  • @sibiar
    @sibiar 6 лет назад

    Thanks bro. you made it very simple :)

  • @hefshinelaxmandarekar3193
    @hefshinelaxmandarekar3193 3 года назад

    Awesome 👌👌👌

  • @omprakashprajapati2952
    @omprakashprajapati2952 3 года назад

    Thanks brother very helpful

  • @ravihind6079
    @ravihind6079 4 года назад

    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

  • @aditya._.official
    @aditya._.official 4 года назад +1

    Love you broo ☑️☑️

  • @spicyicecream6976
    @spicyicecream6976 6 лет назад

    Thank you so much :) Have a great Holidays

  • @rutujawankhade5586
    @rutujawankhade5586 6 лет назад +2

    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

    • @picsplayer7536
      @picsplayer7536 6 лет назад +1

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

  • @zeeshanweb
    @zeeshanweb 6 лет назад

    kia bat hy bhai zabardst

  • @yuvraj8678
    @yuvraj8678 5 лет назад

    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.

  • @mraiyannayeem3846
    @mraiyannayeem3846 5 лет назад

    Thanks. Nice tutorial. Keep it up!

  • @muhammadinamansari516
    @muhammadinamansari516 6 лет назад

    Perfect Explanation ... (Y)

  • @harishyamsharma426
    @harishyamsharma426 6 лет назад

    Thanks sir , very helpful video...

  • @8889140660
    @8889140660 5 лет назад

    Dear Sir kya yah nvbar Responsive hai

  • @rajsharan3282
    @rajsharan3282 4 года назад

    Mai thoda confused hu js or php k leke mujhe kya sikhna chahiye plz tell me...

  • @entertainmentsubscriber
    @entertainmentsubscriber 4 года назад

    Sir dropdown menu ka tutorial bnaiye desktop pe hover pe open ho ar phone me click pe open ho html css jQuery se

  • @shivanidhanak4053
    @shivanidhanak4053 3 года назад

    Best 😌thank you so much❤

  • @InfoTechandResearch
    @InfoTechandResearch 5 лет назад

    Very good