bootstrap 侧边栏悬停显示子菜单

Question

我在 bootstrap

中有这个侧边栏

JSFIDDLE link: http://jsfiddle.net/akcncxqb/

<div class="portfolio-home">
            <div class="row-offcanvas row-offcanvas-left">
              <div id="sidebar" class="sidebar-offcanvas">
                  <div class="portfolio-menu-content">
                    <ul class="nav">
                    <li><center><h1><img src="/small-logo.png" height="30" width="40px"></h1>FexFree</center></li>
                      <li><center><h1><i class="fa fa-home fa-5"></i></h1>Home</center></li>
                      <li>
                        <center>
                            <h1>
                                <i class="fa fa-briefcase fa-5"></i>
                            </h1>Projects
                        </center>
                         <ul class="sub-menu">
                                                    <li><center><h1><i class="fa fa-calendar fa-5"></i></h1>Gallery</center></li>
                                                    <li><center><h1><i class="fa fa-envelope-o fa-5"></i></h1>Contact</center></li>
                        </ul>
                      </li>
                      <li><center><h1><i class="fa fa-calendar fa-5"></i></h1>Gallery</center></li>
                      <li><center><h1><i class="fa fa-envelope-o fa-5"></i></h1>Contact</center></li>
                    </ul>
                  </div>
              </div>
            </div><!--/row-offcanvas -->
        </div>

鼠标悬停在产品上时，我想在侧边栏右侧显示子菜单，而不是在菜单下方我想要侧边栏菜单项项目右侧的子菜单。

Answer 1

试试这个 fiddle 代码： http://jsfiddle.net/akcncxqb/1/

 .portfolio-home{
        min-width: 100%;
        max-width: 100%;
        min-height: 100%;
        /*max-height: 100%;*/
        /*background-image: url('/home/slider/user_back.png');*/
    }

.portfolio-menu-content{
    margin:10px;
}
.portfolio-menu-content i,.portfolio-menu-content li{
    color: #fff;
    cursor: pointer;
}
.portfolio-menu-content h1{
    margin-bottom: 0px;
}
#sidebar {
  min-width: 120px;
  max-width: 120px;
  background-color:#3CC122;
  /*float: left;*/
  margin-left: 5%;
  min-height:60%;
  max-height:60%;
  position:relative;

}.sub-menu {
    background-color: green;
    display: none;
    list-style: outside none none;
    margin: 0;
    padding: 0 20px;
    position: absolute;
    right: -89px;
    top: -18px;
}
.nav > li:hover .sub-menu{display:block;} .portfolio-menu-content {
    margin: 10px 0;
}

bootstrap 侧边栏悬停显示子菜单

bootstrap sidebar on hover show submenu

css

twitter-bootstrap

twitter-bootstrap-3