Bootstrap3: выпадающие элементы, перекрывающиеся в вертикальной панели навигации

Question

Запуск проблемы с вертикальной навигацией в Bootstrap.

Заканчивать Кодекса Pen здесь: 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%; 
} 

Answer 1

Предполагается, что вы не хотите, чтобы хеш-цвет находился на фоне вкладки «Работы». Существует стиль начальной загрузки, что делает:

.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.

Answer 2

Он выбирает свойство из начальной загрузки

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

Добавить

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

на ваш style.css переопределить самозагрузки