3

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

<body>
<div class="container">
    <ul class="menu">
        <li class="home"><a href="#">HOME</a></li>
        <li class="news"><a href="#">NEWS</a>
        <ul class="op news">
            <li><a href="#">Photo</a></li>
            <li><a href="#">Video</a></li>
        </ul></li>
        <li class="economics"><a href="#">ECONOMICS</a>
        <ul class="op economics">
            <li><a href="#">Marketing</a>
            <li><a href="#">Management</a></li>
        </ul></li>
        <li class="local"><a href="#">LOCAL</a>
        <ul class="op local">
            <li><a href="#">City</a></li>
            <li><a href="#">Neighbours</a></li>
        </ul></li>
        <li class="sport"><a href="#">SPORT</a>
        <ul class="op sport">
            <li><a href="#">Football</a></li>
            <li><a href="#">Basketball</a></li>
            <li><a href="#">Tennis</a></li>
            <li><a href="#">Swimming</a></li>
        </ul></li>
        <li class="culture"><a href="#">CULTURE</a>
        <ul class="op culture">
            <li><a href="#">Music</a></li>
            <li><a href="#">Art</a></li>
            <li><a href="#">Theater</a></li>
            <li><a href="#">Architecture</a></li>
        </ul></li>
        <li class="travels"><a href="#">TRAVELS</a>
            <ul class="op travels">
                <li><a href="#">Amsterdam</a></li>
                <li><a href="#">Bahamas</a></li>
                <li><a href="#">Jamaica</a></li>
                <li><a href="#">Las Vegas</a></li>
                <li><a href="#">London</a></li>
                <li><a href="#">Los Angeles</a></li>
                <li><a href="#">Miami</a></li>
                <li><a href="#">Montreal</a></li>
                <li><a href="#">Paris</a></li>
                <li><a href="#">Rome</a></li>
            </ul></li>
        <li class="living"><a href="#">LIVING</a>
        <ul class="op living">
            <li><a href="#">Bring out</a></li>
            <li><a href="#">your death</a></li>
        </ul></li>
        <li class="money"><a href="#">MONEY</a>
        <ul class="op money">
            <li><a href="#">To use</a></li>
            <li><a href="#">To gain</a></li>
        </ul></li>
        <li class="technology"><a href="#">TECHNOLOGY</a>
        <ul class="op technology">
            <li><a href="#">New</a></li>
            <li><a href="#">Old</a></li>
        </ul></li>
        <li class="more"><a href="#">MORE</a>
        <ul class="op more">
            <li><a href="#">About</a></li>
            <li><a href="#">Contacts</a></li>
        </ul></li>
    <div></div>
    </ul>
</div>
</body>

введите сюда описание изображения

7
  • Покажите используемый html. Также, какая JS билиотека подключена (если подключена).
    – cyadvert
    14 янв 2016 в 19:00
  • Но в принципе: каждый элемент меню имеет свой собственный child, который имеет абсолютное позиционирование и показывается при наведении на элемент меню. Но это в общих чертах. Нужны детали Вашего конкретного случая, чтобы дать ответ.
    – cyadvert
    14 янв 2016 в 19:01
  • @cyadvert JS не использовал вообще, хочу сделать это без него. Код HTML прикрепил.
    – Volkusss
    14 янв 2016 в 20:41
  • Чудесно. А сами что пытались? особенно если есть желание без JS :) что пробовали?
    – cyadvert
    14 янв 2016 в 20:41
  • @cyadvert Использовал лишь код CSS, без библиотек, без ничего.. Вот просто с 0. Перебрал паддинги, марджины, текст-алайн.. Вот думаю, если еще способ размещения.
    – Volkusss
    14 янв 2016 в 20:45

1 ответ 1

2

Такой вариант подойдет?

.menu ul {
  background-color: rgba(127,127,127,1);
  border: 1px solid black;
  display: none;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 10;
 }
.menu li {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 5px 10px;
 }
.menu li:hover>ul {
  display: block;
 }
<body>
<div class="container">
    <ul class="menu">
        <li class="home"><a href="#">HOME</a></li>
        <li class="news"><a href="#">NEWS</a>
        <ul class="op news">
            <li><a href="#">Photo</a></li>
            <li><a href="#">Video</a></li>
        </ul></li>
        <li class="economics"><a href="#">ECONOMICS</a>
        <ul class="op economics">
            <li><a href="#">Marketing</a>
            <li><a href="#">Management</a></li>
        </ul></li>
        <li class="local"><a href="#">LOCAL</a>
        <ul class="op local">
            <li><a href="#">City</a></li>
            <li><a href="#">Neighbours</a></li>
        </ul></li>
        <li class="sport"><a href="#">SPORT</a>
        <ul class="op sport">
            <li><a href="#">Football</a></li>
            <li><a href="#">Basketball</a></li>
            <li><a href="#">Tennis</a></li>
            <li><a href="#">Swimming</a></li>
        </ul></li>
        <li class="culture"><a href="#">CULTURE</a>
        <ul class="op culture">
            <li><a href="#">Music</a></li>
            <li><a href="#">Art</a></li>
            <li><a href="#">Theater</a></li>
            <li><a href="#">Architecture</a></li>
        </ul></li>
        <li class="travels"><a href="#">TRAVELS</a>
            <ul class="op travels">
                <li><a href="#">Amsterdam</a></li>
                <li><a href="#">Bahamas</a></li>
                <li><a href="#">Jamaica</a></li>
                <li><a href="#">Las Vegas</a></li>
                <li><a href="#">London</a></li>
                <li><a href="#">Los Angeles</a></li>
                <li><a href="#">Miami</a></li>
                <li><a href="#">Montreal</a></li>
                <li><a href="#">Paris</a></li>
                <li><a href="#">Rome</a></li>
            </ul></li>
        <li class="living"><a href="#">LIVING</a>
        <ul class="op living">
            <li><a href="#">Bring out</a></li>
            <li><a href="#">your death</a></li>
        </ul></li>
        <li class="money"><a href="#">MONEY</a>
        <ul class="op money">
            <li><a href="#">To use</a></li>
            <li><a href="#">To gain</a></li>
        </ul></li>
        <li class="technology"><a href="#">TECHNOLOGY</a>
        <ul class="op technology">
            <li><a href="#">New</a></li>
            <li><a href="#">Old</a></li>
        </ul></li>
        <li class="more"><a href="#">MORE</a>
        <ul class="op more">
            <li><a href="#">About</a></li>
            <li><a href="#">Contacts</a></li>
        </ul></li>
    <div></div>
    </ul>
</div>
</body>

Таким способом нужный Вам тексто появляется там, где надо, я так понимаю.
Однако если Вам надо, чтобы еще и серая подложка во весь экран появлялась, то это уже сложнее. Тут чистым CSS не обойтись, просто потому что она, подложка, вне элементов меню. И средствами CSS из меню к ней никак не обратиться....

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.