абсолютная позиция остается с родителем родителя вместо родителя

#html #css

#HTML #css

Вопрос:

Я столкнулся с некоторой проблемой при попытке позиционировать абсолютный позиционированный div. я предполагаю, что он работает так, как должен, однако я хочу, чтобы он оставался у родителя parent вместо parent, потому что у меня есть выпадающий список, и он будет следовать за родителем сбоку, когда я хочу, чтобы он оставался в верхней части, как отображается first li with div. я создал jsfiddle, чтобы показать проблему. http://jsfiddle.net/trptR / можно ли это сделать только с помощью css или Javascript является обязательным?

HTML

 <div id="navmenu">
    <ul>
        <li>example
            <ul>
                <li><a href="#">sub example1</a></li>
                <li><a href="#">sub example2</a></li>
                <li><a href="#">sub example3</a></li>
                <li><a href="#">sub example4</a></li>
            </ul>
        </li>
        <li>Test
            <ul>
                <li>Sub Test 1
                    <div>
                        <ul>
                            <li><a href="">Projekt</a></li>
                        </ul>   
                    </div>
                </li>
                <li>Sub Test 2
                <div>
                        <ul>
                            <li><a href="">Projekt</a></li>
                        </ul>   
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

 #navmenu{
display:inline-block;
background:red;     
}
#navmenu ul{
list-style:none;
margin:0;
padding:0;  
}
#navmenu ul li{
float:left; 
position:relative;
display:block;
padding:0.5em;
}
#navmenu ul li ul{
position:absolute;  
display:none;
border:solid 1px #333;
background:#fff;
}
#navmenu ul li:hover ul{
display:inline-block;   
}
#navmenu ul li ul li{
float:none;
display:block;
position:relative;
}
#navmenu ul li ul li:hover{
background-color:#EBEBEB;
}
#navmenu ul li ul li div{
display:none;   
width:10em;
height:14.6em;
background:blue;
position:absolute;
top:0;
left:6em;
border:solid 1px #000;

}
#navmenu ul li ul li:hover div{
display:block;  
}

1. для этого вам нужно удалить «position» из вашего родительского элемента, в данном случае из «li». Однако это усложняется. Как я сделал на этом этапе, у меня есть меню первого и 2-го уровней в одном и том же дереве ul li (точно так же, как вы реализовали), но фактическое содержимое меню находится на том же уровне, что и родительский родительский элемент, или в совершенно другом узле. и используйте javascript для ссылки друг на друга.

Ответ №1:

Не могли бы вы удалить position:relative как из вашего #navmenu ul li набора стилей, так и из вашего #navmenu ul li ul li набора стилей? http://jsbin.com/ziqov/1/edit

Ответ №2:

Позиционирование — это ключ к успеху

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

 parentElementTop > parentElementBelow > element

что вы хотите, чтобы элемент был выровнен по parentElementTop, а не по parentElementBelow.

Чтобы выровнять элемент абсолютно по parentElementTop, все, что вам нужно сделать в CSS, — это не устанавливать position значение relative или absolute на промежуточном parentElementBelow, и любой последующий абсолютно позиционированный элемент будет выровнен в соответствии с последним нестатически позиционированным предком. В вашем случае это будет parentElementTop, который вам нужен.

1. Если вы посмотрите на второй выпадающий список в Jsfiddle, вы обнаружите, что div будет следовать за родительским элементом вниз по странице в зависимости от N элементов в списке. Я хотел бы, чтобы он все время оставался в верхней части с родительским элементом 1 div вместо того, чтобы скользить вниз со следующим родителем.

2. Вот именно. Установите позиционирование на UL, а не на LI.

Ответ №3:

подумайте об использовании

 #navmenu > ul > li{
  float:left;   
  position:relative;
  display:block;
  padding:0.5em;
  cursor:pointer;
}

потому что в противном случае ваши селекторы перезаписывают друг друга.

1. > Селектор нацелен на всех указанных дочерних элементов указанного родительского элемента в parent > child отношениях. Видишь w3schools.com/CSSref/css_selectors.asp или developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started /…