Перейти к содержимому

Фотография
- - - - -

Выпадающие горизонтальные подменю


  • Вы не можете создать новую тему
  • Авторизуйтесь для ответа в теме
Сообщений в теме: 5

#1 clean-nt

clean-nt

    Прохожий

    Топикстартер
  • Новичок
  • 0
    4 сообщ.

Отправлено 07 Ноябрь 2018 в 11:07

Здравствуйте!

 

Подскажите, пожалуйста, как правильно написать код css, чтобы при наведении на ссылку "Услуги", далее на "Разработка" ссылки "Продвижение" и "Контекст" оставались на своих позициях, а под ссылкой "Разработка" появлялось горизонтальное подменю "Дизайн" и "Сайт"?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru-RU"><head><style></style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Включаем механизм выпадания</title>
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    
<style>

body {
    min-width: 300px;
    padding: 10px;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.main-menu {
    background-color: #E64A19;
    margin: 0;
    padding: 0;
    width: 580px;
    list-style: none;
    border: 10px solid #E5E5E5;
}

.main-menu > li {
    display: inline-block;
    margin-right: -4px;
    position: relative;
}

.main-menu a {
    display: block;
    padding: 8px 10px;
    color: #fff;
    border-left: 1px solid #E5E5E5;
    text-decoration:none;
}

.main-menu a:hover {
    background: #f5f5f5;
    color: #000;
}

.main-menu .sub-menu {
    position: absolute;
    left: 1px;
    width: 283px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #FCF8E3;
    display:none;
}

.main-menu .sub-menu a {
    margin-right: -4px;
    border: 1px solid #E5E5E5;
}

.main-menu > li:hover .sub-menu {
    display:block;
}

.sub-menu > li {
    display:inline-block;
    background-color: #E64A19;
}    

.pod-menu {
    display:none;
}

.sub-menu > li:hover .pod-menu {
    display:block;
}

.pod-menu > li {
    display:inline-block;
    background-color: #E64A19;
    position: relative;
}

</style>
    
<body>    
    <ul class="main-menu">
            <li><a href="#company">О компании</a></li>
            <li>
                <a href="#services">Услуги</a>
                <ul class="sub-menu">
                    <li><a href="#1">Разработка</a>
                       <ul class="pod-menu">
                         <li><a href="#5">Дизайн</a></li>
                         <li><a href="#5">Сайт</a></li>
                       </ul>
                    </li>
                    <li><a href="#2">Продвижение</a></li>
                    <li><a href="#3">Контекст</a></li>
                </ul>
            </li>
            <li><a href="#team">Сотрудники</a></li>
        </ul>
</body>
</html>

Спасибо


Сообщение отредактировал clean-nt: 07 Ноябрь 2018 в 11:10

  • 0

Спонсор

#2 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 1016
    3 712 сообщ.

Отправлено 07 Ноябрь 2018 в 18:55

Точно также, как и для второго уровня: для третьего уровня .pod-menu добавить position: absolute;
Чтобы было в строку - надо применять своего рода хак: делать через inline-block (оно там уже есть), но добавить white-space: nowrap;
Я так понимаю там была попытка сделать в одну строку с помощью отрицательных маргинов, но это не очень хороший вариант, потому что шрифты на разных ОС - немного разные и у меня, например, на Линуксе - они не уместились. Поэтому лучше применить white-space: nowrap;
А пробелы убрать физически - написать код без пробелов
 
<li></li><!-- тут не должно быть пробела --><li></li><li></li>

  • 0

#3 clean-nt

clean-nt

    Прохожий

    Топикстартер
  • Новичок
  • 0
    4 сообщ.

Отправлено 08 Ноябрь 2018 в 09:03

А пробелы убрать физически - написать код без пробелов
 

<li></li><!-- тут не должно быть пробела --><li></li><li></li>

Здравствуйте!

 

Сделал вот так:

.pod-menu > li {
	position: absolute;
	display:inline-block;
	background-color: #E64A19;
	white-space: nowrap;
}

Получилось как на картинке. Причем, ссылка "Сайт" идет на первом месте, хотя по списку она на втором месте.

 

И насчет "<li>" не совсем понял, вот так:

<ul class="main-menu">
<li><a href="#company">О компании</a></li><li><a href="#services">Услуги</a>
<ul class="sub-menu">
<li><a href="#1">Разработка</a>
<ul class="pod-menu">
<li><a href="#5">Дизайн</a>
</li><li><a href="#7">Сайт</a></li>
</ul>
</li><li><a href="#2">Продвижение</a></li><li><a href="#3">Контекст</a></li>
</ul>
</li><li><a href="#team">Сотрудники</a></li>
</ul>

или так:

<ul class="main-menu"><li><a href="#company">О компании</a></li><li><a href="#services">Услуги</a><ul class="sub-menu"><li><a href="#1">Разработка</a>
<ul class="pod-menu"><li><a href="#5">Дизайн</a></li><li><a href="#7">Сайт</a></li>
</ul></li><li><a href="#2">Продвижение</a></li><li><a href="#3">Контекст</a></li>
</ul></li><li><a href="#team">Сотрудники</a></li></ul>

Прикрепленные изображения

  • site css.png

  • 0

#4 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 1016
    3 712 сообщ.

Отправлено 08 Ноябрь 2018 в 15:44

Потому что позиция добавлена для LI, а надо для UL.

 

И стоит добавить обнуление отступов для списков (ul и li)

  margin:0;
  padding:0;

  • 0

#5 clean-nt

clean-nt

    Прохожий

    Топикстартер
  • Новичок
  • 0
    4 сообщ.

Отправлено 09 Ноябрь 2018 в 07:08

Добрый вечер!
 

Потому что позиция добавлена для LI, а надо для UL.

 

Извините, пожалуйста, но я не понял, какая позиция? white-space: nowrap;?

Имеете ввиду она добавлена в:

.pod-menu > li 

а нужно в:

.pod-menu > ul  

или имеется ввиду:

position: absolute;

В этом отрезке кода что нужно изменить или добавить, чтобы заработало:

.pod-menu > li {
	position: relative;
	display:inline-block;
	background-color: #E64A19;
	white-space: nowrap;
	left: 1px;
	margin:0;
	padding:0;
}

.pod-menu > ul {
	position: absolute;
	display:inline-block;
	background-color: #E64A19;
	white-space: nowrap;
	left: 1px;
	margin:0;
	padding:0;
} 

P.S.

И сразу же вопрос, про наследовательность:

.main-menu .sub-menu {
position: absolute;
left: 1px;
width: 283px;
margin: 0;
padding: 0;
list-style: none;
background: #FCF8E3;
display:none; 
} 

Если я добавляю pod-menu, нужно ли мне тогда писать что-то вроде:

.main-menu .sub-menu. pod-menu {

или достаточно написать последние два:

.sub-menu. pod-menu {

Спасибо!


Сообщение отредактировал clean-nt: 09 Ноябрь 2018 в 07:12

  • 0

#6 clean-nt

clean-nt

    Прохожий

    Топикстартер
  • Новичок
  • 0
    4 сообщ.

Отправлено 09 Ноябрь 2018 в 10:31

С задачей справился.


  • 0



Похожие темы Свернуть

  Название темы Форум Автор Статистика Последнее сообщение
Статистика

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 скрытых пользователей