Pure HTML and CSS drop down navigation bar
ฝัง
- เผยแพร่เมื่อ 6 ก.ย. 2024
- Pure HTML and CSS drop down navigation menus bar
Download Source code from here: techmidpoint.com/
Please Watch More Videos.
=========================
HTML and CSS Navigation Bar with Search Box : • HTML and CSS Navigatio...
Responsive and transparent navigation menus with social media icons : • Responsive and transpa...
Awesome Overlay Signup Form | HTML, CSS and JavaScript: • Awesome Overlay Signup...
Responsive navbar with search box | HTML and CSS: • Responsive navbar wit...
Navigation Bar with Login Form || HTML and CSS: • Navigation Bar with Lo...
CSS Coffee Cup with Stream || HTML and CSS: • CSS Coffee Cup with St...
CSS Background Animation | HTML and CSS : • CSS Background Animati...
CSS Grid Layout | HTML and CSS : • CSS Grid Layout | HTML...
Full Screen Login Form with HTML and CSS : • Full Screen Login Form...
CSS Smoke Text Animation : • CSS Smoke Text Animation
Awesome Animated Search Box using HTML and CSS : • Awesome Animated Searc...
Cool CSS Border Animation On Hover | HTML and CSS: • Cool CSS Border Anima...
3D social media icons with HTML and CSS : • 3D social media icons ...
These are good videos but just a suggestion: can you put the code in the description so we don't have to keep pausing. Thank you. Like if you agree
#adnan
{
background-color: red;
height: 500px;
}
#nav
{
background: tomato;
max-height: 800px;
}
ul
{
list-style: none;
padding: 0;
margin: 0;
position: absolute;
}
ul li
{
float: left;
margin-top: 20px;
}
ul li a
{
width: 150px;
color: white;
display: block;
text-decoration: none;
font-size: 20px;
text-align: center;
padding: 10px;
border-radius: 10px;
font-family: Century Gothic;
font-weight: bold;
}
a:hover
{
background: #669900;
}
ul li ul
{
background: tomato;
margin-top: 10px;
}
ul li ul:hover
{
transition: 2s ease;
background: gray;
color: white;
}
ul li ul li
{
float: none;
}
ul li ul
{
display:none;
}
ul li:hover ul
{
display: block;
}
HOME
NEWS
BLOG
FEEDBACK
MORE
MORE1
MORE2
MORE3
MORE4
MORE5
ABOUT
CONTACT
bro this code
thanks so much
@@adnantv3162 God Bless your soul man hahaha. Thankiuuu
@@aaranragu thanks
I have done same coding but after ul li ul : hover display: block not working. That is sub menus are not displayed after mouse over to list.
it is ul li:hover ul
I have watched several of your videos they are great.I dont know how but i just search ,scroll down and just click your video without knowing😅😩
It was a very useful video. Thank you.
I almost couldn't find a way to make my own code,
When I watched this video, I finally found a way.
It was easy, simple and effective
Thank you for sharing your experience with us. Would you kindly please show us how to add a title to the left and then the navbar next to it because I have tried to float the bar to the center but it didn't work. Thank you
instablaster
This was such a nice and easy guide on navigation bars. I had to pause the video a lot or go back while i was doing the work, but that's all a process of learning.
What a superb vudeo for a beginner like me, i appreciate
you nailed it! very nice! now i have to practice this. it's harder than i thought it would be for sure
i can't get the drop down to come down
this is a great video thank you for your time an putting it together
Great and simple video for beginners.,Good Work for mate.
your codes were helpful but only problem i faced was that the dropdown hides into the navigation bar....waiting for your help ..thankyou
thank you for this video
it's very use full for me
U r to good you make my work to easy .thank u sir u r great .
Hello sir, the website you put in the description box is not taking me to the source code as you stated above. I did my account in Appian and still not finding any code there.
How can we understand this program without explanation,so type the program with explanation,so that we can understand it.
very nice video sir it helps me a lot in my project
Hey mate i want my dropdown menu if i click on a list it will load and open the content of my work
The navigation bar is on the left. How can I change it to the center?
How to write paragraph contents for l tabs and more 1, more 2 and other major tabs. Plz help
how to make hover full, in full width?
In navigation bar if move our mouse it's disappear right how can be fix as till select the option
My problem when creating dropdown menu is, drop down menu not sit right under its parent menu. Its goes left on page
Thankyou webmaster.
why did not use tag before the element so that whole area be capable of being selected...
It chose one to be selected . Obviously.
Not working
Yes, for me too..
I have done same coding but after ul li more options not working...... plz explain properly
congrats bro best videos i seen
This is great. Thanks.
Will the menu bar be responsive on a mobile device?
Need code in HTML to do that
If you keep on hover then how will it work on mobile version....we cannot have cursor in mobile right....make a video without hover effect....like on clicking that li we have to get inside of list
Javascript
Thank you so much sir
thanks aloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooootttttttttttttttttttttttttttttttttttttttttttttt my brother
Excellent video
thank you very much
Nc bro easy method . Thx 😊
Thanks
Very Good
Thank You 👍👍
thanks , simple and clear
Just create it. Possible for me. Thank you. Doing great and carry on.
Thank you sir
Plz send video
Greet css trick...
But there is typo in html code..
You write without
(in 4.20)
Thank...
Thank you for learning
Thanks a lot sir
Please send me the source code
Thank for share the video
thanks a lot
Nice vedio sir #webgurututorials
Tq so much😇
Thanks man
Kindly give this source file it is not availabile in given source file link
THX sir
thnak you
Can I create dropdown without "ul and li"????
no you must use ul and li
That's the code for it lol 😂 why you trying to find another way?
anyone can create this ,but u have to use different tools for that which is flexible
These days more than 50% of users browse with a smartphone - and there is NO HOVER-EFFECT ON SMARTPHONE,
therefore you should not use this code - you should add the "toggle" effect.
Your boss bro
Not Working Actually :/ SOmething error in the words in the navigator bar
U doing it wrong and not paying attention or u using a different text editor
Bro code to koi bhi type krle usse smjhaya he nhi, not taught what you did but just showed how you did
Sir I want source code for this file..
good
Does href have to equal #? Or is this for example?
it can be anything u want
@@THlive really??
not able to download the file bro
Thanku
still using notepadd++ now.. XD
you should use flexbox ;)
Thank u for suggestion ...........
Why would you do that? just limit browser support for no reason
flexbox makes html code dirty.. css gird > flexbox
I think you mean Grid. You're talking shit though. CSS has no bearing on HTML code. Thats the whole point of CSS, the separation of concerns.
CSS GRID framework not Grid..
in response to user : Informatique DZ
since he's talking about css frameworks... might as well use the cleaner one
thank
9:39
الكود خاطئ
Does he even know how to speak?? All of his words are incomplete. Like-
Nvgtn br
That's the way he pronounces it. Please be more clear!!!
Aap to sirf type karte na rahe ho samjhaye to thoda bhi
Sir hindi m btao
ul li :hover ul li
{
}
What your are explaining it's look like your learning it yourself.waste of time
Okay, what the fking problem? Made a nav bar ..so? Why the fck complaining son?!
your style not good
How is not good???
waste of time
No...
This is native css,bro...
thank you :D
Good
Not working
thank you so much
Thank you.