Question

我在引导程序中有这个侧边栏

JSFIDDLE链接：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

试试这个小提琴代码： 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侧边栏

1 个答案: