2016-10-30 4 views
0

Я пытаюсь поставить подменят прямо под его собственный выбор варианта как this, но когда я установил левый и правые атрибуты на 0
Вертикального подменят с дивами

.sidebar_wrapper 
{ 
position:absolute; 
background-color:lightgray; 
left:0; 
right:0; 
} 


имеет ширину целого сайта. Когда я устанавливаю их на авто, он выглядит как this.

Как разместить свое подменю точно под этим div или, что будет выглядеть еще круче, на самом деле?

код (весь JSFiddle в комментариях):
HTML:

<div id="sidebar"> 
    <div class="sidebar_option">Strona główna</div> 
    <div class="sidebar_option">Galeria</div> 
    <div class="sidebar_option">Reżyserzy 
     <div class="sidebar_wrapper"> 
      <a href="tarantino.html"><div class="submenu" style="margin-top:10px">Quentin Tarantino</div></a> 
      <a href="coen.html"><div class="submenu">Bracia Coen</div></a> 
      <a href="anderson.html"><div class="submenu">Wes Anderson</div></a> 
     </div> 
    </div> 
    <div class="sidebar_option">Ulubione filmy</div> 
    <div class="sidebar_option">Seriale</div> 
    <div class="sidebar_option">Kontakt</div> 
</div> 


CSS:

.submenu 
{ 
text-align:center; 
border-bottom:dotted 2px black; 
padding-top:10px; 
padding-bottom:10px; 
display:none; 
font-size:13px; 
} 
.sidebar_wrapper 
{ 
position:absolute; 
background-color:lightgray; 
left:auto; 
right:auto; 
} 
.sidebar_option:hover div 
{ 
display:block; 
} 
.sidebar_option:hover 
{ 
background-color:lightgray; 
cursor:pointer; 
} 
.sidebar_option 
{ 
text-align:center; 
margin:10px; 
padding:10px; 
border-bottom:dotted 2px black; 
} 
+0

https://jsfiddle.net/8d3p50hy/ –

ответ

0

Я думаю, что ключ вам необходимо установить положение sidebar_option к относительно так, что submenu_wrapper будет положением относительно боковой панели вместо окна. Затем некоторое значение для левого и правого для подменю. Это может быть что угодно, но если вы хотите, чтобы это было сосредоточено, они должны быть одинаковыми.

.sidebar_option { 
    position: relative; 
} 
.sidebar_wrapper { 
    position: absolute; 
    background-color:lightgray; 
    left: 5%; 
    right: 5%; 
    z-index: 2; 
} 

Вот обновленный jfiddle: https://jsfiddle.net/8d3p50hy/13/

+0

это работает, спасибо –

Смежные вопросы