How to make Dropdown menu by css

Bonus: How to add arraw in the list item which has children(dropdown) menu by Jquery.

Here is the easiest way to make dropdown menus by css.

Firstly add your html markups,


<nav class="nav">
<ul class="menu">
<li><a href="">Home</a></li>
<li><a href="">about</a></li>
<li><a href="">Dropdown</a>
<ul>
<li><a href="#">item</a>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li><a href="">feature</a></li>
<li><a href="">contact</a></li>
</ul>
</nav>

Then add the Css like below.

.nav ul li{
list-style: none;
float: left;
position: relative;
margin-left: 10px;
display:block;
}
.nav ul li a{
font-size:15px;
color:red;
text-decoration: none;
padding:10px;
display:block;
text-transform: uppercase;
}
.nav ul li a:hover{
background:#000;
color:#fff;
}
.nav ul li ul{
position:absolute;
display:none;
z-index: 333;
left:60px;
}
.nav ul li:hover > ul{
display:block;
}
.nav ul li ul li a{
font-size:12px;
display:inline-block;
width:120px;
}
.menu li a span {
display: inline-block;
width: 0;
height: 0;
margin-left: 5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid red;
}
.menu li ul li a span {
display: inline-block;
width: 0;
height: 0;
margin-left: 5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 10px solid red;
}

For the arraw add this Jquery code like below. And don’t forget to add the jquery file in you html file.

$(function() {
$('.menu a').each(function() {
if ( $(this).parent('li').children('ul').size() > 0 ) {
$(this).append('<span></span>');
}
});
});

That’s all.


14 Comments

  • Tractor Workshop Manuals

    March 10, 2017

    Hi there! Quick question that’s entirely off topic. Do you know how to make your site mobile friendly? My weblog looks weird when browsing from my apple iphone. I’m trying to find a template or plugin that might be able to fix this issue. If you have any suggestions, please share. Many thanks!

    Reply
  • blog

    March 12, 2017

    Great article. I will be experiencing some of these issues as well..|

    Reply
  • Healthy

    March 12, 2017

    I’m not sure where you’re getting your information, but good topic. I needs to spend some time learning much more or understanding more. Thanks for magnificent information I was looking for this info for my mission.

    Reply
  • Health & Fitness

    March 20, 2017

    I enjoy you because of all your labor on this web page. My mother loves carrying out investigation and it’s easy to understand why. All of us learn all concerning the lively method you produce insightful secrets via the website and as well as foster response from some other people on this matter while our child is in fact understanding a whole lot. Take advantage of the remaining portion of the year. You are conducting a remarkable job.

    Reply
  • Business

    March 21, 2017

    Wow, marvelous blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your website is excellent, as well as the content!

    Reply
  • Business

    March 21, 2017

    I loved as much as you’ll receive carried out right here. The sketch is tasteful, your authored material stylish. nonetheless, you command get bought an nervousness over that you wish be delivering the following. unwell unquestionably come further formerly again since exactly the same nearly a lot often inside case you shield this hike.

    Reply
  • Travel & Leisure

    March 21, 2017

    Hi, i think that i saw you visited my weblog thus i came to “return the favor”.I am attempting to find things to enhance my website!I suppose its ok to use some of your ideas!!

    Reply
  • Business

    March 21, 2017

    Keep working ,terrific job!

    Reply
  • Travel & Leisure

    March 21, 2017

    fantastic points altogether, you simply won a new reader. What could you recommend in regards to your put up that you simply made some days in the past? Any positive?

    Reply
  • Shopping

    March 21, 2017

    I’m extremely impressed with your writing skills as well as with the layout on your blog. Is this a paid theme or did you customize it yourself? Anyway keep up the nice quality writing, it is rare to see a great blog like this one today..

    Reply
  • Law & Legal

    March 21, 2017

    Great amazing issues here. I¡¦m very happy to look your post. Thank you so much and i’m looking ahead to touch you. Will you kindly drop me a mail?

    Reply
  • Law & Legal

    March 21, 2017

    excellent points altogether, you simply received a new reader. What might you recommend in regards to your publish that you just made some days ago? Any certain?

    Reply
  • Business

    March 21, 2017

    Thanks so much for giving everyone an extraordinarily brilliant possiblity to check tips from this web site. It’s usually very enjoyable and as well , stuffed with a great time for me personally and my office peers to visit your web site a minimum of 3 times in a week to find out the latest tips you will have. And definitely, I’m always amazed with the stunning creative concepts served by you. Selected 3 ideas in this article are essentially the most beneficial I’ve had.

    Reply
  • Dating & Relationship

    March 22, 2017

    Great blog here! Also your website so much up very fast! What host are you the use of? Can I am getting your affiliate hyperlink on your host? I desire my web site loaded up as quickly as yours lol

    Reply

Leave a Reply