<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script> <div id="wrapper"> <div class="mtt_catagory"> <img src="https://s6.postimg.org/9m3yvl65p/catagory_icon.png" /> Catagory </div> <ul class="menu"> <li class="item1"> <a href="#"><img src="https://s6.postimg.org/ircbpg9kd/medical_icon.png" /><span class="ttl"> Medical </span><span class="ttl_arrow"><</span></a> <ul> <li class="subitem1"> <a href="#"> MBBS <span>5.5K</span></a> </li> </ul> </li> <li class="item2"> <a href="#"><img src="https://s6.postimg.org/nnfyh59pp/science_icon.png" /><span class="ttl"> Science </span><span class="ttl_arrow"><</span></a> <ul> <li class="subitem1"> <a href="#"> Chemistry <span>56</span></a> </li> <li class="subitem2"> <a href="#"> Math <span>145</span></a> </li> <li class="subitem3"> <a href="#"> Physics <span>351</span></a> </li> </ul> </li> <li class="item3"> <a href="#"><img src="https://s6.postimg.org/ozxnj1759/engr_icon.png" /><span class="ttl"> Engineering </span><span class="ttl_arrow"><</span></a> <ul> <li class="subitem1"> <a href="#"> Architecture <span>250</span></a> </li> <li class="subitem2"> <a href="#"> Chemical Engineering <span>105</span></a> </li> <li class="subitem3"> <a href="#"> Civil Engineering <span>96</span></a> </li> <li class="subitem4"> <a href="#"> CSE/CSIT <span>257</span></a> </li> <li class="subitem5"> <a href="#"> EEE <span>650</span></a> </li> <li class="subitem6"> <a href="#"> Marine Engineering <span>264</span></a> </li> <li class="subitem7"> <a href="#"> Mechanical Engineering <span>78</span></a> </li> <li class="subitem8"> <a href="#"> Telecommunication Technology <span>64</span></a> </li> <li class="subitem9"> <a href="#"> Textile Engineering <span>98</span></a> </li> </ul> </li> <li class="item4"> <a href="#"><img src="https://s6.postimg.org/fpljfhwfh/business_icon.png" /><span class="ttl"> Business </span><span class="ttl_arrow"><</span></a> <ul> <li class="subitem1"> <a href="#"> ACCA <span>245</span></a> </li> <li class="subitem2"> <a href="#"> BBA <span>222</span></a> </li> <li class="subitem3"> <a href="#"> BBS <span>142</span></a> </li> <li class="subitem4"> <a href="#"> CA <span>68</span></a> </li> <li class="subitem5"> <a href="#"> EMBA <span>142</span></a> </li> <li class="subitem6"> <a href="#"> MBA <span>214</span></a> </li> <li class="subitem7"> <a href="#"> Master of Bank Management <span>123</span></a> </li> </ul> </li> <li class="item5"> <a href="#"><img src="https://s6.postimg.org/9shnyofal/humanities_icon.png" /><span class="ttl"> Humanities </span><span class="ttl_arrow"><</span></a> <ul> <li class="subitem1"> <a href="#"> BA (Hons.) in English <span>146</span></a> </li> <li class="subitem2"> <a href="#"> Economics <span>1K</span></a> </li> <li class="subitem3"> <a href="#"> History <span>146</span></a> </li> <li class="subitem4"> <a href="#"> LLB <span>651</span></a> </li> <li class="subitem5"> <a href="#"> MA in English <span>241</span></a> </li> <li class="subitem6"> <a href="#"> Sociology <span>365</span></a> </li> </ul> </li> <li class="item6"> <a href="#"><img src="https://s6.postimg.org/8fzywshv1/ssc_icon.png" /><span class="ttl"> SSC </span><span class="ttl_arrow"><</span></a> <ul> <li class="subitem1"> <a href="#"> Bangla <span>265</span></a> </li> <li class="subitem2"> <a href="#"> Business Studies/Commerce Group <span>213</span></a> </li> <li class="subitem3"> <a href="#"> English <span>36K</span></a> </li> <li class="subitem4"> <a href="#"> Huminities/Arts Group <span>745</span></a> </li> <li class="subitem5"> <a href="#"> Science Group <span>3652</span></a> </li> </ul> </li> <li class="item7"> <a href="#"><img src="https://s6.postimg.org/hvfu9zzvx/hsc_icon.png" /><span class="ttl"> HSC </span><span class="ttl_arrow"><</span></a> <ul> <li class="subitem1"> <a href="#"> Bangla <span>325</span></a> </li> <li class="subitem2"> <a href="#"> Business Studies/Commerce Group <span>124</span></a> </li> <li class="subitem3"> <a href="#"> English <span>236</span></a> </li> <li class="subitem4"> <a href="#"> Huminities/Arts Group <span>124</span></a> </li> <li class="subitem5"> <a href="#"> Science Group <span>321</span></a> </li> </ul> </li> <li class="item8"> <a href="#"><img src="https://s6.postimg.org/3z7ly43n1/creative_icon.png" /><span class="ttl"> Creative Writing </span><span class="ttl_arrow"><</span></a> <ul> <li class="subitem1"> <a href="#"> Famous Personality <span>251</span></a> </li> <li class="subitem2"> <a href="#"> Novels <span>235</span></a> </li> <li class="subitem3"> <a href="#"> Poem <span>111</span></a> </li> <li class="subitem4"> <a href="#"> Tutorials <span>325</span></a> </li> </ul> </li> </ul> </div>

.mtt_catagory { background: #e74c3c; padding: 10px; font-size: 20px; color: #ffffff; } a { text-decoration: none; } ul, ul ul { margin: 0; padding: 0; list-style: none; } #wrapper { border: 1px solid #c1c1c1; width: 30%; font-size: 15px; margin: 90px auto; } .menu { width: auto; height: auto; } .menu > li > a { background-color: #f9f9f9; border-bottom: 1px solid #c1c1c1; width: 100%; height: 40px; line-height: 40px; text-indent: 12px; display: block; position: relative; color: #6a6a6b; } .menu ul li a { background: #ffffff; width: 100%; height: 30px; line-height: 30px; text-indent: 30px; display: block; position: relative; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 400; color: #2e2e2e; } .menu li a img { height: 30px; width: 30px; margin-top: 5px; } .menu li a .ttl { margin: 1px 0 0 -5px; position: absolute; } .menu ul li:last-child a { border-bottom: 1px solid #c1c1c1; } .menu > li > a:hover, .menu > li > a.active { color: #e74c3c; } .menu > li > a .ttl_arrow { font-family: Tahoma; font-size: 14px; font-weight: bold; display: inline-block; position: absolute; right: 20px; top: 50%; line-height: 20px; margin: -10px 0 0 0; color: #e75040; text-indent: 0; text-align: center; transition: all 0s ease; } .menu > li > a:hover .ttl_arrow, .menu > li a.active .ttl_arrow { transform: rotate(-90deg); } .menu > li > ul li a:before { content: '●'; font-size: 16px; color: #7f8c8d; position: absolute; width: 1em; height: 1em; top: 0; left: -15px; } .menu > li > ul li:hover a, .menu > li > ul li:hover a span, .menu > li > ul li:hover a:before { color: #32373D; } .menu ul > li > a span { font-size: 0.857em; display: inline-block; position: absolute; right: 1em; top: 50%; background: #fff; border: 1px solid #d0d0d3; line-height: 1em; height: 1em; padding: 3px 4px; margin: -8px -5px 0 0; color: #878d95; text-indent: 0; text-align: center; -webkit-border-radius: .769em; -moz-border-radius: 769em; border-radius: 769em; text-shadow: 0px 0px 0px rgba(255,255,255,.01); }

$(function() { var menu_ul = $('.menu > li > ul'), menu_a = $('.menu > li > a'); menu_ul.hide(); menu_a.click(function(e) { e.preventDefault(); if (!$(this).hasClass('active')) { menu_a.removeClass('active'); menu_ul.filter(':visible').slideUp('normal'); $(this).addClass('active').next().stop(true, true).slideDown('normal'); } else { $(this).removeClass('active'); $(this).next().stop(true, true).slideUp('normal'); } }); });