How to Make Accordion Menu in CSS with Hover Effect Like JQuery

Today with only CSS we are going to make an Accordion Menu,Which will have hover effect like JQuery. We are going to make it with pure CSS. Lets start the magic now, First add this HTML markup

HTML Markup :

<ul class="accordion"> 

        <li><a href="#">Home</a>

<ul>

<li><a href="#">About Us</a></li>

<li><a href="#">Why Us</a></li>

<li><a href="#">Contact Us</a></li>

<li><a href="#">Our Locations</a></li>

</li>

</ul>

<li><a href="#">Sty Connected</a> <ul>

<li><a href="#">Blog</a></li>

<li><a href="#">Social Network</a></li>

</ul></li>

<li><a href="#">Services</a>

<ul>

<li><a href="#">Web Design</a></li>

<li><a href="#">Web development</a></li>

<li><a href="#">SEO</a></li>

<li><a href="#">Wordpress</a></li>

<li><a href="#">Drupal</a></li>

</ul>

</li>

</ul>

After adding the above markup,You'll get a picture like this

Now we need to add some style to it,


CSS:

.accordion {
margin: 0px auto;
padding: 0px;
list-style: none;
width: 240px;
font-family: Arial;
                        font-size: 90%;
background-color: #111;
}


.accordion li {
overflow: hidden;
}


.accordion li a {
display: block;
border-bottom: 1px solid #444;
background-color: #222;
text-decoration: none;
                                color: white;
                                text-align:center;
                               padding: 5px;
                               outline: none 0px;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}




Now you'll get some thing like this

Looks Quite Good isn't it? We are ready with our menu layout and coloring. But now we need to add some more CSS to make the amazing hover effect and to make it work like a Accordion Menu.


CSS:



.accordion li a:hover {
background-color: #180000;
                             -webkit-scrollbar-button:vertical;
}
.accordion > li:first-child >a:first-child {
border-top: 1px solid #444;
}
.accordion ul {
margin: 0px;
padding: 0px;
                               list-style: none;
height: 0px;
                               overflow: hidden;
transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
}
.accordion li:hover ul,
.accordion:not(:hover) li:first-child ul {
                                    height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
}
.accordion ul li a {
color: #AAA;
                       border: 1px solid #777;
border-top: 0px none;
background-color:#680000;
white-space: nowrap;
overflow: hidden;
}
.accordion ul li a:hover {
background-color: #500000;
}

Now after this you'll get your accordion menu like this

Looks Great isn't it?...Just add your menu list and customize yourself the color of the accordion menu according to your requirement.Please share with others if you like it.And keep visiting my blog for other exciting stuff on web designing.