Создание вертикального «выпадающего» меню в CSS

Question

Создание вертикального «выпадающего» меню в CSS

0

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

HTML, который я использую.

<ul id="nav">

<li><a href="#">Work</a></li>
    <li><a href="#">Imaging</a>
    <ul>
        <li><a href="#">Photoshop</a>
            <ul>
                <li><a href="">Link</a></li>
                <li><a href="">Link</a></li>
            </ul>
        </li>
        <li><a href="#">Illustrator</a></li>
    </ul>
</li>
<li><a href="#">Home</a></li>

CSS, который я использую.

ul {
list-style-type:none;
margin:0;
padding:0;
}

a {
display:block;
width:60px;
}

#nav ul {
    display: none;
}

#nav li:hover > ul {
    display: block;
    position: relative;
    float: left;
}

Спасибо заранее, если кто-то может мне помочь.

Kezaraux 19 янв. 2014, в 19:46

Источник

Теги:

html

css

2 ответа

Ещё вопросы

Afzaal Ahmad Zeeshan · Answer 1 · 2014-01-19T17-13-00.000Z

потому что ваш документ имеет все элементы в строке и всегда будет показывать их один за другим!

Поэтому мой совет для вас - просто использовать

position: absolute;

Таким образом вы можете выровнять элементы над документом, не меняя текущий стиль документа и выравнивание элементов!

Для получения дополнительной информации: https://developer.mozilla.org/en-US/docs/Web/CSS/position

Mark Nijboer · Answer 2 · 2014-01-19T16-20-00.000Z

Я бы позиционировал ul в вашем абсолютном абсолютном.

position:absolute;

Когда вы это сделаете, элемент будет парить над ли-родителем. Когда вы попробуете немного с положительной и отрицательной маржой, вы сможете поместить элемент hover рядом с ним родителем. Это будет примерно так:

#nav li:hover > ul {
display: block;
position: absolute;
float: left;
margin-left:60px;
}

Большое спасибо за это, он добился цели! Теперь мне просто нужно применить это к главному, над чем я работаю.
Нет проблем, я рад, что это сработало!