javascript - Submenu under submenu display when hover on menu using bootsrtap -
i trying create submenu under submenu.i using bootstrap 3.1. problem when mouse hover on menu(see image: hover on "what offer" ) submenu under submenu(from image link 4.1) display. should display when hover on link4 only. how can prevent this. 1 have idea? please share me.
my codes below:
<li class="dropdown"> <a href="/">what offer<span class="caret"></span></a> <ul class="dropdown-menu dropdown-menu-left"> <li> <a href="/static_pages/index">link1</a> </li> <li> <a href="/static_pages/index">link2</a> </li> <li> <a href="/static_pages/index">link3</a> </li> <li class="dropdown"> <a href="/static_pages/index">link4<i class="right-caret"></i></a> <ul class="dropdown-menu sub-menu"> <li> <a href="/static_pages/index">link 4.1</a> </li> <li> <a href="/static_pages/index">link 4.2</a> </li> </ul> </li> </ul> </li> css:
.dropdown-menu .sub-menu { left: 100%; position: absolute; top: 0; display:none; margin-top: -1px; border-top-left-radius:0; border-bottom-left-radius:0; border-left-color:#fff; box-shadow:none; } .right-caret:after,.left-caret:after { content:""; border-bottom: 5px solid transparent; border-top: 5px solid transparent; display: inline-block; height: 0; vertical-align: middle; width: 0; margin-left:5px; } .right-caret:after { border-left: 5px solid #000; } .left-caret:after { border-right: 5px solid #ffaf46; }
here example of hoverable menu.
html
<ul class="nav nav-pills"> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">dropdown <b class="caret"></b></a> <ul class="dropdown-menu" id="menu1"> <li> <a href="#">2-level menu <i class="icon-arrow-right"></i></a> <ul class="dropdown-menu sub-menu"> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li class="divider"></li> <li class="nav-header">nav header</li> <li><a href="#">separated link</a></li> <li><a href="#">one more separated link</a></li> </ul> </li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li class="divider"></li> <li><a href="#">separated link</a></li> </ul> </li> </ul> css
body { padding-top: 60px; padding-bottom: 40px; } .sidebar-nav { padding: 9px 0; } .dropdown-menu .sub-menu { left: 100%; position: absolute; top: 0; visibility: hidden; margin-top: -1px; } .dropdown-menu li:hover .sub-menu { visibility: visible; } .dropdown:hover .dropdown-menu { display: block; } .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu { margin-top: 0; } .navbar .sub-menu:before { border-bottom: 7px solid transparent; border-left: none; border-right: 7px solid rgba(0, 0, 0, 0.2); border-top: 7px solid transparent; left: -7px; top: 10px; } .navbar .sub-menu:after { border-top: 6px solid transparent; border-left: none; border-right: 6px solid #fff; border-bottom: 6px solid transparent; left: 10px; top: 11px; left: -6px; } here jsfiddle http://jsfiddle.net/zaheerbaloch/54r1g29s/
Comments
Post a Comment