CSS выпадающее меню прыжки

Question

CSS выпадающее меню прыжки

0

Я застрял в выпадающем меню. Проблема в том, что "родительская" ссылка прыгает.

HTML:

<ul id="nav">
    <li><span>Page 1</span>
        <ul>
            <li><a>Extralong Page 1.1</a></li>
            <li><a>Page 1.2</a></li>
            <li><a>Page 1.3</a></li>
        </ul>
    </li>
    <li><a href="#">Page 2</a></li>
    <li><span>Page 3</span>
        <ul>
            <li><a>Page 3.1</a></li>
            <li><a>Long description for page 3.2</a></li>
            <li><a>Page 3.3</a></li>
            <li><a>Page 3.4</a></li>
        </ul>
    </li>
</ul>

CSS:

* {
    margin: 0;
    padding: 0;
}

#nav {
        float: right;
    }

        #nav ul {
            float: left;
        }

        #nav li {
            float: left;
            padding-top: 2px;
            list-style: none;
            background: #3451ff;
        }

            #nav li a,
            #nav li span {
                display: block;
                text-decoration: none;
                font-size: 12pt;
                font-weight: bold;
                padding: 13px 10px 9px 10px;
            }

                #nav li a:link, #nav li a:active, #nav li a:visited,
                #nav li span {
                    color: #FFF;
                }

                #nav li a:hover, #nav li a.active,
                #nav li span:hover {
                    color: #000;
                }

            #nav li li {
                display: none;
            }

            #nav li:hover li {
                display: block;
                float: none;
                background: #555;
            }

        #nav li li a {
            font-size: 10pt;
            margin: 1px;
            width: 100%;
            background: #3c6f3a;
            padding: 5px 0;
        }

демонстрация

Как я могу сделать этот родительский статический, чтобы его ширина не изменялась при наведении? Я не хочу использовать js.

Explicat 17 фев. 2014, в 09:21

Источник

0

Вы проверили оскорбительные элементы (и окружающие) с помощью инструментов разработчика? Отличным является Chrome> Elements> Computed. Выберите элементы, которые вы хотите проверить в элементах. Затем посмотрите на Computed, когда вы вносите изменения, чтобы увидеть, есть ли ... гм - какие-либо изменения. Облегчает точное выявление фактического виновника.
Kebman 23 июнь 2018, в 00:08

Теги:

html

css

drop-down-menu

3 ответа

1

Вы можете использовать position:absolute и сделать свою родительскую position:relative li position:relative Demo

#nav ul {
    position:absolute;
    right:0;
 }

Era 17 фев. 2014, в 06:43

0

Посмотрите на меню, оно выглядит довольно плохо с первым выпадающим списком "глючит" слева.
Ruddy 17 фев. 2014, в 08:15
0

@Ruddy: но это лучше, чем прыгать: D: D
richa_pandey 17 фев. 2014, в 08:17
0

Это правда? ДЕМО . Его сейчас с экрана. Это не очень хороший способ сделать это, если он имеет такую же width что и родительский элемент, он не может "пропасть". Хорошая идея
Ruddy 17 фев. 2014, в 08:20

Показать ещё 1 комментарий

0

Использовать позицию: относительный для родительского элемента ul и указать позицию: абсолютный для родительского ребенка.. он будет работать нормально.

Вот обновленная скрипка: http://jsfiddle.net/nikhilvkd/gmU55/5/

#nav li li {
                display: none;
                 position:relative;
            }

            #nav li:hover li {
                display: block;
                float: none;
                position:absolute;
                background: #555;
            }

Krish 17 фев. 2014, в 06:42

0

Вы должны еще раз взглянуть на то, что вы сделали. Все ссылки объединены в одну под родительским.
Ruddy 17 фев. 2014, в 08:16

Ещё вопросы

Вы проверили оскорбительные элементы (и окружающие) с помощью инструментов разработчика? Отличным является Chrome> Elements> Computed. Выберите элементы, которые вы хотите проверить в элементах. Затем посмотрите на Computed, когда вы вносите изменения, чтобы увидеть, есть ли ... гм - какие-либо изменения. Облегчает точное выявление фактического виновника.
Посмотрите на меню, оно выглядит довольно плохо с первым выпадающим списком "глючит" слева.
Это правда? ДЕМО . Его сейчас с экрана. Это не очень хороший способ сделать это, если он имеет такую же width что и родительский элемент, он не может "пропасть". Хорошая идея
Вы должны еще раз взглянуть на то, что вы сделали. Все ссылки объединены в одну под родительским.

Ruddy · Accepted Answer · 2014-02-17T06-50-00.000Z

Задайте ширину для родителя:

#nav li {
    float: left;
    padding-top: 2px;
    list-style: none;
    width: 100px; /* Add this bad boy */
    background: #3451ff;
}

ДЕМО ЗДЕСЬ

Спасибо! Есть ли еще способ без установки фиксированной ширины?
@Explicat Ну, без заданной ширины <li> будет таким же, как и ваш текст, ДЕМО ЗДЕСЬ . Прокрутите страницу 1, и вы увидите ее супер долго. Нужна ширина, чтобы контролировать это.