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
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.
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!
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.
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
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.
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.
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.
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 😁😁😁
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; }
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)
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.
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!!!
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{ .... }
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
hey! all of this works but when i mouseover, the drop-down menu is slightly to the left. Setting ul as display: table and margin: auto doesnt fix it... help!
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
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
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.
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.
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
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...
welcome HOME PRODUCTS Electronis Furniture Cosmetics Television Mobile Phones SERVICES Electronis Furniture Cosmetics Television Mobile Phones CONTACTS
Thanks Clever! Great Tut! I had figured everything out on my own regarding nested menus but I could not get the dropdown to work. Thanks a bunch for covering the ul li ul li css!!!
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!
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!
![⭐️( ลอยกระทง 2024 ) Ver. แดนซ์ Remix BY [ ดีเจกิต รีมิกซ์ ]](http://i.ytimg.com/vi/rMWOLhgXUHc/mqdefault.jpg)
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
اشبك يواد
th-cam.com/users/edit?o=U&video_id=8aLpBMX1Whc
So how about this tutorial: th-cam.com/video/dUPzppbfwWI/w-d-xo.html
@@mastercode7851 هههههههه
@@nour3660 يااح صار للكومنت اربع سنين
Malupet ka talaga Clever Techie. Sana marami ka pang matulungang IT Students.
Freakin' AWESOME!!! Easily one of the best tutorials I've seen in a long time! You rock, dude!!!
Exactly. This guy knows what he is doing
Probably easiest way I have ever seen, without any grid, flex complicated combination. Perfect
😂lol
Developer only knows😂
This was easily the best tutorial on this I have found. Perfect.
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.
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!
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!
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.
this code helped me a lot!If your code doesn't work,i don't know really...
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
Follow for Follow ;)
Assuming it creates a linkm
this is the best tutorial i have seen for dropdown menu
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
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.
Interesting. Visual code use a period
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.
Hi, what must you add to the code to get those commands to work. I have added CC3, but it still doesn't work
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.
Dreamweaver is an engine and it needs updates. Your browser is also an engine but its updated that's why it is working fine.
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
This tutorial is exactly what I was looking for. Thank you!
I watched a few tutorial in my mother lang. They werent clear. You explained in a great way. Thanks for the video.
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.
I am at the basic level of HTML and CSS and I am amazed... he did not use the dropdown in the coding.
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
O
@@landonarturo3952 Chahiye
This is the best and easiest tutorial on this subject I have seen to date. Great thanks.
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
Charley me too😂
Glad to hear that
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 😁😁😁
Thanks for the tutorial. it is very informative short, sweet and efficient and above all very easy to understand.
Excellent video. Not too much info, not too little. Piece by piece. COOL information. Well done, sir.
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;
}
Dude spaces are ignored they don't matter I am a prpfessional web developer.
@@gamingwithus_yt5109 spaces do matter trust me but not all the time
20 minutes i spent troubleshooting this. . You sir!! Thank you!
@@gamingwithus_yt5109 it do dimwit
i don't know some people are unable to make it but this your tutorial is perfect it 101% worked for me !!!!! thanks>>>
I'm having problem with ul li ul li {display: none;} still displays..
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)
can u help im having trouble in my drop down when i hover all the sub show
Clear, simple, and straightforward video. Thanks Clever Techie!!
Niceee. Best HTML Video
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!
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.
can you send the code
@@sabiyashaikh9296 I solved this with *display: table* on the top li
@@jamalswiss715 Works nicely thanks :D
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!!!
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{
....
}
thank you so much!!! I was looking for reason why my "hover" doesn't work:)
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
tqs dude
Thank you so much
Tq for the help...
If anybody wants to center the drop-down menu just set ul as display: table; and margin: auto;
It will work like a charm!
hey! all of this works but when i mouseover, the drop-down menu is slightly to the left. Setting ul as display: table and margin: auto doesnt fix it... help!
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?
same
add position: absolute
use "display:block;"
@@misteralfie where ?
@@subcount3528 put it where ?
You should choose this as your career.
how many old you are you are a good web page maker.
KEEP IT UP!!
This is awesome , thank yiu and Buddha's Bless you clever techie
In 2019 Your still the best
nice. No matter how many times I try I always fail :/
gracz pl m2😿
Awwww I'm sorry you guys are having difficulties, what exactly are you having a problem with?
when i hover along from left to right its ok....but when unable to click on bottom list
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
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
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
I'm also having trouble centering this, any tips?
Put everything in body in a div and give it a margin.
you have to write "width: 300px, or more. by ul li{
after seen a lot of tutorial, finally got an easy tricks for create sub menu......thanks lot
how do you center the whole navigation menu horizontally?
I think try not using the float:left; and it should by default be horizontal
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.
blitzer it works! Cheers
oh lol for some reason i was thinking your asking how to make it vertically. haha
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.
It was absolutely no doubt the easiest one to learn.
how do i center this?
I want center it but i cant.
with that code, you can't because you're using float and that is one of the things it does
Any ideas how to center it?
put it in a DIV and center that div.
write body{
margin-left: 60px;
} it works
@@ANTOND. Put a tag around the whole code, and in the css use margin-left on the
Spot on! Audio is excellent and steps are accurately narrated, show me more!
But how to get the Menu in the middle of the display?
I used text-align:center and center but it had not work?!
use line-height
write margin-left: 60px; in the body it works i tried it.
margin: auto works better
margin: auto;
Use margin left,right,height
THE BEST INSTRUCTION OF ALL TIME! I FEEL LIKE I JUST GOT MY WHOLE LIFE BACK!!!!!
how do i add links to the boxes inside so i can actually click on them
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
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...
Good job sir. how do I make this responsive?
I've created a video on how to exactly that.
Can you share the link for how you make this responsive?
first you make a pages then write link in home page
just use % in lace of pixels on height ,width
odunlade oluwaseun how can I use this in blogger??? Plzz reply
So easy to follow and understand. i wish other coding videos were like this too.
Thanks you.
Bro, my navigation bar is not aligned to it's sub bar.
same pro bro hae u get any solution for that?
Yah, it happens that I got 1 excess curly brace.
iam not understanding u bro...kindly explain me what was the prob
welcome
HOME
PRODUCTS
Electronis
Furniture
Cosmetics
Television
Mobile Phones
SERVICES
Electronis
Furniture
Cosmetics
Television
Mobile Phones
CONTACTS
can u plz find out the prob in my code above
,this is very helpful..now that i have online class because of corona virus..
Can you do a tutorial using notepad?
Despicable Minion it's the same just less practical
just type the same thing
this is also capable on notpad
Why notepad lol 😂
Best Easy way to Create Dropdown .. Thanks Sir
Excellent!, Excellent!, Excellent! I've never seen like this technic ever. I hope you'll make videos more & more like this. Thank you.
More to come!
iam fresher for this field it can be usefull easily understand thank u bro
Bro if u want help ;)
best class I ever had on drop down menu. Thank you
Literally the best simple tutorial out there
just here to say that it helped me in my graduation final work. thanks
not gonna lie, your presentation are incredible..understandable and easy to understand...TyVm
Brilliant tutorial! Simple yet useful. Im inspired to create more on my channel. Thanks Clever Techie
So Easy This is Best navigation tutorial i ever seen... So So Awesome.. This Video Most Important For Html css Beginners
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
absolute brilliant, did it at first attempt.
i love the way you explain.. good teacher!
Glad to hear that!
Wow Awesome...so beautiful and the control of the hover...it’s fascinating
Thankyou... I love transparency...
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..
Thanks Clever! Great Tut! I had figured everything out on my own regarding nested menus but I could not get the dropdown to work. Thanks a bunch for covering the ul li ul li css!!!
I dont like videos but I liked this one
This is spectacular
Wow! I really enjoyed your simple and easy tutorial. Dude, you are the teacher. Keep it up.
I am from India your good teacher
Hello....!
Clever techie. Your video is so impressive to improve our skill in this field. It's very helpful for me. Thanks
Understandable! That's a best tutorial a have seen so far..
Thank you.
You cleared my all doubts
I'm glad.
Tried it on Chrome and IE, both work!
sir ,why we used overflow:hidden property in tag in creating navigation bar
honestly this video was super helpful for my school project. thanks :)
you are so great! blessings on you. I followed everything and i feel now like a professional programmer! keep on the good work!
Instead of margin-right, I did this, margin: 2px 2px 2px 2px; and it looks cool as well.
Thank you so much sir i could not maintain drop down menu but now it makes easy to do,,,,,
You are good a teacher, thank you for teaching
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!
It was too easy for me i think! Thanks buddy!
افضل واسهل شرح لعمل قائمه منسدله/Better and easier to explain the work of a drop - down list
Awesome...thank u for explaining step-by-step approach and display step by step outputs.....you are great..keep doing sir
Hey! Finally I understood a litle css. Thank you! I'm just learning html, but i think css can be realy helpfull!
Thanks for your video.. I am getting back into webdesign and retraining. You have explained very well and straight to the point. :)
bro you make things look easy, i love the way you flow in coding my broer awesome video!
Bravo man bravo. Excellent video.
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!
I am impressed with the didacticity of this material. I am so gratefull.
ive been looking how to do this for so many weeks, thankyou so much bro!
the cleverest techie around
U explained it in a very simple way ! Thank you soooooo much !!!
One of the most helpful video thank you so much sir 🙏☺️
This is so amazing, you have shown this so simply..! Great job!!!