How to create a side menu on hover on list items

Question

I currently have a drop down like this:

I want that if each of the list items in the drop down like ASPIRE etc. from the 1st drop down and so on have another drop down on the side when those items are clicked. Like when ASPIRE is clicked then another dropdown on the side appears. How to do that?

Here is my code:

CSS Part:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
@charset "UTF-8";
/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {


margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  text-decoration: none;
  line-height: 1;
  font-family: 'Open Sans', sans-serif;


font-size: 14px;
  position: relative;
}
#cssmenu a {
  line-height: 1.3;
}

#cssmenu {
  width: 300px;
 margin-left: 90px;  background: #A3FFFF;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 3px;
  padding: 3px;


 -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}


#cssmenu > ul > li {
  margin: 0 0 3px 0;
}
#cssmenu > ul > li:last-child {
  margin: 0;
}
#cssmenu > ul > li > a {
  font-size: 15px;
  display: block;
  color: 

#ffffff;
  text-shadow: 0 1px 1px #000;
  background: #A3FFFF;
  background: -moz-linear-gradient(#565656 0%, #323232 100%);
  background: -webkit-gradient

(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
  background: -webkit-linear-gradient(#565656 0%, #323232 100%);


background: linear-gradient(#565656 0%, #323232 100%);
  border: 1px solid #000;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
#cssmenu > ul > li > a > span {
  display: block;
  border: 1px solid #666666;
  padding: 6px 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;


border-radius: 4px;
  font-weight: bold;
}
#cssmenu > ul > li > a:hover {
  text-decoration: none; font-weight: bold;
}
#cssmenu > ul > li.active {
  border-bottom: 

none; 
}
#cssmenu > ul > li.active > a {
  background: #47A3FF;
  background: -moz-linear-gradient(#47A3FF 0%, #47A3FF 100%);
  background: -webkit-gradient

(linear, left top, left bottom, color-stop(0%, #47A3FF), color-stop(100%, #47A3FF));
  background: -webkit-linear-gradient(#47A3FF 0%, #47A3FF 100%);


background: linear-gradient(#47A3FF 0%, #47A3FF 100%);
  color: #fff;
  text-shadow: 0 1px 1px #fff;
  border: 1px solid #47A3FF;
}
#cssmenu > ul > li.active > a 

span {
  border: 1px solid #47A3FF;
}
#cssmenu > ul > li.has-sub > a span {
  background: url(images/icon_plus.png) 98% center no-repeat;
}
#cssmenu > ul > li.has

-sub.active > a span {
  background: url(images/icon_minus.png) 98% center no-repeat;
}

/* Sub menu */
#cssmenu ul ul {
  padding: 5px 12px;
  display: none;
}
#cssmenu ul ul li {
  padding: 3px 0;
}
#cssmenu ul ul a {
  display: block;
  color: #191975;


font-size: 13px;
  font-weight: bold;
}
#cssmenu ul ul a:hover {
  color: cornflowerblue; font-weight:bold;
}

Javascript:

( function( $ ) {
$( document ).ready(function() {
$('#cssmenu > ul > li > a').click(function() {
  $('#cssmenu li').removeClass('active');
  $(this).closest('li').addClass('active'); 
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active');
    checkElement.slideUp('normal');
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#cssmenu ul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }
  if($(this).closest('li').find('ul').children().length == 0) {
    return true;
  } else {
    return false;   
  }     
});
});
} )( jQuery );

Html:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <script src="script.js"></script>

<div id='cssmenu'>
<ul>



<li class='has-sub'><a href='#'><span>CENTRAL COMPLIANCE</span></a>

<ul>

<li><a href='#'><span>ASPIRE</span></a></li>

<hr>     
<li><a href='#'><span>CRRMS</span></a></li>  
<hr>
<li><a href='#'><span>Employee Accounts</span></a></li>
<hr> 
<li><a href='#'><span>Future Ethics Training</span></a></li>
<hr>
<li><a href='#'><span>GEPOC</span></a></li>
<hr>
<li><a href='#'><span>Global Registration</span></a></li>
<hr>
<li><a href='#'><span>MBL</span></a></li>
<hr>
<li><a href='#'><span>Account Affirmations</span></a></li>

<hr>       
<li class='last'><a href='#'><span>Outside Affiliations</span></a></li>

</ul>

</li>

<li class='has-sub'><a href='#'><span>CONTROL ROOM</span></a>

<ul>

<li><a href='#'><span>CDS</span></a></li>

<hr>
<li><a href='#'><span>UK Registration</span></a></li>
 <hr><li class='last'><a href='#'><span>Compliance Portal</span></a></li>

</ul>

</li>


<li class='has-sub'><a href='#'><span>LARGE HOLDINGS</span></a>

<ul>
         <li class='last'><a href='#'><span>LHO</span></a></li>

</ul>

</li>


<li class='has-sub'><a href='#'><span>ORCHESTRIA</span></a>

<ul>
         <li class='last'><a href='#'><span>Orchestria</span></a></li>

</ul>

</li>
 </ul></div>

possible duplicate of [Pure CSS multi-level drop-down menu](http://stackoverflow.com/questions/9100344/pure-css-multi-level-drop-down-menu) — TecBrat, Sep 16 '15 at 18:30
do you have to correct your code, or can you implement a new solution? I posted a new solution anyway. — jv-k, Sep 16 '15 at 21:04

score 0 · Answer 1 · answered Sep 16 '15 at 21:03

0

Have a look at this, you can style it how you like, and it works perfectly:

http://slicknav.com/

answered Sep 16 '15 at 21:03

jv-k

618
5
20

How to create a side menu on hover on list items

1 Answers1