Горизонтальное меню CSS имеет неправильную x-позицию, как поставить прямо под родительское меню? - PullRequest
Новая
       21

Горизонтальное меню CSS имеет неправильную x-позицию, как поставить прямо под родительское меню?

0 голосов
/ 17 декабря 2010

Я пытаюсь создать горизонтальное выпадающее меню с помощью CSS.Но подменю появляется либо слева от сайта (когда я установил его на position: absolute), либо в самом левом углу меню (когда установлено position: relative).Я хочу, чтобы оно появилось прямо под меню, на котором я наведите курсор.

Вот мой код: 

/* div für Menü */
.menu{
 height: 35px;
 float: left; 
 padding: 0px;
 margin: 0px;
 outline: 1px solid grey;
 background-color: #f6f6f6;
 font-size:100%;
}

/* UL Menü */
.menu ul{
 list-style: none;
 margin: 0px;
 padding: 0px;
 float: left;
 height: 100%;
 background-color: #f6f6f6;
}

/* Untermenü anzeigen bei Mouseover */
.menu ul li:hover ul{
 display: block;
}

/* Hintergrund ändern bei Mouseover */
.menu ul li:hover{
 background-color: #005ea2;
}


/* Menü LI */
.menu ul li{
 display: inline;
 height: 35px;
 padding-left: 5px;
 padding-right: 5px;
 padding-top: 9px;
 padding-bottom: 9px;
 margin: 0;
 position: relative;
 border-right: 1px dashed gray;
}

/* Letzter Eintrag ohne Rand */
.menu li:last-child{
 border: none;
}


.menu a{ 
 line-height: 250%;
 color: #333333;
 text-decoration: none;
 height: 100%;
 margin: 0px;
}


/* UL Untermenü */
.menu ul li ul{
 display: none;
 width: 200px;
 padding: 0px;
 margin: 0;
 background-color: #f6f6f6;
 outline: 1px solid gray;
 position: absolute;
 z-index: 200;
}


/* LI Untermenü */
.menu ul li ul li{
 height: 35px;
 display: block;
 line-height: 100%;
 padding: 0px;
 border: none;
 background-color: #f6f6f6;
 position: relative;
}

1 Ответ

0 голосов
/ 17 декабря 2010

Добавить сюда 

.menu ul li:hover{
    background-color: #005ea2;
}

a position: relative;.

Это установит содержащий блок , чтобы иметь возможность позиционировать материал относительно него.После этого вы можете просто поиграть с различными значениями top и left, чтобы получить точный желаемый результат.

Также z-index на .menu ul li ul бесполезен.

Отдельное примечание: Добро пожаловать в StackOverflow!

...