Детское меню CSS LI, чтобы увеличить ширину родителя

Question

Так что я знаю почти то, что мне нужно сделать, но я не знаю , как Мне нужно это сделать.

У меня есть раскрывающееся меню, которое открывается, когда вы наводите на него курсор. Ребенок вызывает увеличение ширины родителя, когда вы наводите на него курсор, и это не то, что я хочу. Я знаю, что мне нужно установить ребенка в положение абсолютно ... но когда я это делаю, ребенок больше не появляется, и кажется, что наведение на родителя больше не функционирует. Может ли кто-нибудь помочь выяснить, где именно должна находиться абсолютная позиция? Вы можете видеть, что у меня есть что-то, что я прокомментировал.

Я хочу, чтобы ребенок был выровнен в правом нижнем углу «Action».

У меня также есть проблема, если я устанавливаю прописку/маржу на родителя. Он распространяется на ребенка. Я считаю, что могу решить это либо с абсолютным позиционированием, либо после этого.

Вот мой HTML:

<br /> 
<div style="width: 90%; margin:auto; background-color:#CCC; height:36px;"> 
<div id="actions"> 
    <ul> 
     <li class="action_arrow_down"><a href="#">Actions</a> 
      <ul> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another Action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class = "separated_action"><a href="#">Separated Link</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

И мой CSS:

html, body { 
margin: 0; 
padding: 0; 
height: 100%; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
} 

#actions { 
float: right; 
display: block; 
background-color: #4d90fe; 
color: #FFF; 
font-size: 16px; 
font-family: Arial, Helvetica, sans-serif; 
} 

#actions ul{ 
padding: 0px; 
margin: 0px; 
display: block; 
position: relative; 
overflow: hidden; 
} 

#actions li ul { 
display: none; 
background-color: #ffffff; 
border: #CCC 1px solid; 
/*position:absolute; 
top:100%; 
left:0;*/ 

} 

#actions li ul li { 
    display: block; 
background-color: #ffffff; 
color: #000000; 
overflow: hidden; 
} 

#actions li ul li:hover, #actions li ul li a:hover { 
background-color: #eeeeee; 
} 

#actions li ul li a { 
color: #000000; 
} 

#actions li{ 
line-height: 36px; 
list-style: none; 
font-size: 14px; 
text-indent: 15px; 
} 

#actions li:not(ul li){ 
background-color: #4d90fe; 
} 

#actions li:not(ul li):hover { 
background-color: #0362fd; 
} 

#actions li:hover > ul { 
display: block; 
} 

#actions li a { 
text-decoration: none; 
color: #ffffff; 
display:block; 
} 

#actions li ul li { 
display: block; 
} 

.separated_action { 
border-top: #CCC 1px solid; 
} 

/*.action_arrow_down { 
background-image: url('images/action_arrow_down.png'); 
background-repeat: no-repeat; 
background-position: right center; 
}*/ 

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

Адрес jsfiddle.

Answer 1

У вас уже было это. То, что вы «теряете» свое подменю, когда вы устанавливаете его абсолютным, заключается в том, что вы относите родителя относительно.

Решение является удалить эту строку:

#actions ul{ 
    padding: 0px; 
    margin: 0px; 
    display: block; 
    /*position: relative; <-- delete this line */ 
    overflow: hidden; 
} 

#actions li ul { 
    display: none; 
    background-color: #ffffff; 
    border: #CCC 1px solid; 
    position:absolute; 
    margin-left: -80px; 
} 

Проверьте свой updated Fiddle.

Отрегулируйте margin-left, чтобы сместить подменю влево или вправо. По умолчанию левая сторона родителя - это левая часть дочернего элемента. Если вы дадите ребенку фиксированную ширину, вы можете использовать отрицательный margin-left для выравнивания правых сторон.

Проверьте 2nd updated Fiddle.