Bootstrap3：在垂直导航栏中重叠的下拉项目

在Bootstrap中遇到垂直导航栏的问题。Bootstrap3：在垂直导航栏中重叠的下拉项目

查看代码笔在这里：link

注意的“作品”部分是如何呈现向下传统的降？我希望它能顺利地与导航内联，而不是弹出到包含其他项目的下拉菜单中。我已经把这件事弄了个小时。我确定它与位置，显示或默认引导属性有关。

要澄清，我在寻找a UI like this子菜单。了解“作品”部分如何将其下方的菜单项按下？

有什么建议吗？

HTML

<ul class="nav items"> 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Works <span class="caret"></span></a> 
     <ul class="dropdown-menu" role="menu"> 
      <li> 
      <a href="#">DASHBOARD</a> 
      </li> 
      <li> 
      <a href="#">DASHBOARD</a> 
      </li> 
     </ul> 
     </li> 
     <li><span></span>Dashboards </li> 
     <li><span></span>Game Finder</li> 
     <li><span></span>Channel</li> 
     <li><span></span>My Profile</li> 
    </ul> 
</nav> 


<div id="pagewrapper"> 
    <div id="hamburger"> 
     <div id='top'></div> 
     <div id='middle'></div> 
     <div id='bottom'></div> 
    </div> 
    <div class="navbar navbar-fixed-top"> 
    <div class "container"> 
     <a class="pull-right" href="#"> 
     <img src="" alt="logo" /></a> 
    </div> 
    </div> 
</div>

CSS

.navbar { 
    background-color: #33669a; 
    box-shadow: 1px 2px 2.82px 0.18px rgba(0, 0, 0, 0.24); 
    height: 58px; 
    padding: 7px 40px 7px 0; 
} 

#page-wrapper { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-colour: rgba 0, 0, 0, 0.2; 
} 

#title { 
    color: #fafafa; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    font-size: 2em; 
} 

#hamburger { 
    position: fixed; 
    z-index: 5000; 
    top: 15px; 
    left: 15px; 
    cursor: pointer; 
    transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91); 
} 
#hamburger div { 
    width: 35px; 
    height: 2px; 
    margin-bottom: 8px; 
    background-color: #00DFFC; 
    transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, background-color 250ms; 
} 

#hamburger.active { 
    left: 230px; 
} 
#hamburger.active div { 
    background-color: #343838; 
    z-index: 5000; 
} 
#hamburger.active #top { 
    transform: translateY(10px) rotate(-135deg); 
} 
#hamburger.active #middle { 
    opacity: 0; 
    /* transform: rotate(135deg); */ 
} 
#hamburger.active #bottom { 
    transform: translateY(-10px) rotate(-45deg); 
} 

#sidebar { 
    position: fixed; 
    overflow: auto; 
    top: 0px; 
    left: -275px; 
    width: 275px; 
    opacity: 0; 
    padding: 0px 0px; 
    height: 100%; 
    background-color: #fafafa; 
    color: #343838; 
    transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91); 
    z-index: 1500; 
    box-shadow: 14px 24px 37.6px 2.4px rgba(0, 0, 0, 0.24); 
    list-style: none; 
} 

#sidebar.active { 
    left: 0px; 
    opacity: 1; 
} 

.items { 
    position: relative; 
    top: 140px; 
    transform: translateY(-50%); 
} 
.items li { 
    position: relative; 
    display: inline-block; 
    cursor: pointer; 
    font-family: Roboto; 
    color: rgba(0, 0, 0, 0.87); 
    font-size: 14px; 
    font-weight: 500; 
    line-height: 20px; 
    padding: 15px 30px; 
    transition: all 250ms; 
    width: 100%; 
} 
.items li:hover { 
    padding: 15px 45px; 
    background-color: rgba(52, 56, 56, 0.2); 
} 
.items li:hover a { 
    display: block; 
} 

.sidebar-head { 
    background-color: #33669a; 
    width: 100%; 
    height: 144px; 
} 

.sidebar-img { 
    display: block; 
    border-radius: 50%; 
    background-color: #e0e0e0; 
    width: 56px; 
    height: 56px; 
    overflow: hidden; 
    position: absolute; 
    left: 23px; 
    top: 24px; 
} 

.sidebar-img img { 
    height: 100%; 
    margin: 0 auto; 
} 

.username { 
    font-family: Roboto; 
    color: #ffffff; 
    font-size: 14px; 
    font-weight: 400; 
    line-height: 24px; 
    text-align: left; 
    position: absolute; 
    left: 23px; 
    top: 100px; 
} 

.sidebar-nav .dropdown-menu { 
    position: relative; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
    border-radius: 0; 
    border: none; 
    background-color: #222; 
    box-shadow: none; 
} 

.sidebar-nav li { 
    position: relative; 
    line-height: 20px; 
    display: inline-block; 
    width: 100%; 
}

来源

2015-09-14 Neeks

我认为这个问题是关于''的一个padding' '标签。只是删除它将是顺利和内联 –

我假设你不想要'Works'选项卡背景中的哈希颜色。有引导的风格，做：

.nav>li>a:hover, .nav>li>a:focus{ 
    text-decoration: none; 
    background-color: #eee; 
}

现在覆盖的背景颜色在你的CSS文件一样，

.nav>li>a:hover, .nav>li>a:focus{ 
     text-decoration: none; 
     background-color: transparent !important; 
    }

如果你想删除然后跳舞效果：

.items li:hover { 
    /* padding: 15px 45px; */ 
}

覆盖此并在index.html中评论填充。

来源

2015-09-14 05:22:01

这不是填充。我在上面的编辑中澄清过。 – Neeks

根据我的理解，代码笔中的“联盟选择器”按照bootsnip工作（现在下拉选项）。你现在确切的期望是什么？ –

它是从引导采摘财产

.nav>li>a{position:relative;display:block;padding:10px 15px}

添加

.nav>li>a{position:relative;display:block;padding:1px 1px !important}

到自己的style.css覆盖引导

来源

2015-09-14 06:18:24

这不是填充。我在上面的编辑中澄清过。 – Neeks

你试过我的代码吗？我在你的网站上测试过，它工作正常。 –

Bootstrap3：在垂直导航栏中重叠的下拉项目

回答

相关问题