I'm trying to create a menu like this : Demo .
First of all : Here is my fiddle . There is a button top of the menu and there is a sidebar menu with 4 links that the last one has sublinks.
After click on the button menu get wider.
So far so good. I want to show sublinks with hover when mouse on the last links and also I want to show sublinks below the parent link with click when menu get wider .
I did this, but there is a problem. I want to show sublinks with click when menu get wide.
But now it didn't !
Here is my important CSS
.rightbar.noneStyle #rightMenu.accordion:hover .accordion-body.collapse{
background: none repeat scroll 0 0 #fff;
display: none;
height:0;
position:unset;
right: auto;
top: auto;
visibility: visible;
}
.rightbar #rightMenu.accordion:hover .accordion-body.collapse {
background: none repeat scroll 0 0 #fff;
display: block;
height: auto !important;
position: absolute;
left: 61px;
top: -8px;
visibility: visible;
}
I have made some changes in the css and made exactly as you have shown in Demo. Here is updated code in my http://jsfiddle.net/sushantmaharjan/z5ogk3yb/
I have used :not(selector) in css. Check for the browser compatibility. It works fine in most modern browsers.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments