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

Статус
Закрыто для дальнейших ответов.

clean-nt

Member
Регистрация
07.11.2018
Сообщения
19
Здравствуйте!

Подскажите, пожалуйста, как правильно написать код 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>

Спасибо
 

BaNru

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

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

clean-nt

Member
Регистрация
07.11.2018
Сообщения
19
BaNru сказал(а):
А пробелы убрать физически - написать код без пробелов


<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>
 

Вложения

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 137
Потому что позиция добавлена для LI, а надо для UL.

И стоит добавить обнуление отступов для списков (ul и li)
Код:
  margin:0;
  padding:0;
 

clean-nt

Member
Регистрация
07.11.2018
Сообщения
19
Добрый вечер!

Потому что позиция добавлена для 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

Member
Регистрация
07.11.2018
Сообщения
19
Здравствуйте!

Подскажите, пожалуйста, можно ли изменить код так, чтобы результат был как на верхней картинке (css primer2)?
При этом все блоки (блок 1, 2, 3) были отделены друг от друга, как они и написаны в коде.

Спасибо!
Код:
<!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: 900px;
    padding: 0;
    font-family: Arial, sans-serif;
    font-size: 14px;
}
    
.name {
    text-align: center;
    padding: 1px;
    font-color: #00ff00;
    border: solid 1px black;
    background: url(wp_sand.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;    
    width: 915px;
    height: 50px;
    margin:0 auto;
}

a.class1
{
    width: 155px;
    height: 30px;
    display: block;
    text-align: center;
    font-weight: bold;
    margin: 3px;
}

.main-block-1 {
    margin: 3px;
    padding: 10;
    width: 155px;
    float: left;
}

.main-block-1 > li  {
    display: inline-block;
    position: relative;
}

.main-block-1 a {
    border-radius: 5px;
    color:  #36454A;
    background: -webkit-linear-gradient(top, #A4D3E0 , #A4D3E0 50%, #CBE3EB 50%);
    background: -o-linear-gradient(top, #A4D3E0 , #A4D3E0 50%, #CBE3EB 50%);
    background: linear-gradient(to top, #A4D3E0 , #A4D3E0 50%, #CBE3EB 50%);
    box-shadow: 2px 2px 3px black;
    display: block;
    padding: 8px 10px;
    text-decoration: none;
}

.main-block-1 a:hover {
    background: -webkit-linear-gradient(bottom, #A4D3E0 , #A4D3E0 50%, #CBE3EB 50%);
    background: -o-linear-gradient(bottom, #A4D3E0 , #A4D3E0 50%, #CBE3EB 50%);
    background: linear-gradient(to bottom, #A4D3E0 , #A4D3E0 50%, #CBE3EB 50%);
}

.main-block-1 .services1 {
    position: absolute;
    margin: 0;
    padding: 0;
    display: none;
}

.main-block-1 > li:hover .services1 {
    display: block;
}

.services1 > li {
    display: inline-block;
}

.main-block-2 {
    margin: 3px;
    padding: 10;
    width: 155px;
    float: left;
}

.main-block-2 > li  {
    display: inline-block;
    position: relative;
}

.main-block-2 a {
    border-radius: 5px;
    color:  #36454A;
    background: -webkit-linear-gradient(top, #A4D3E0 , #A4D3E0 50%, #CBE3EB 50%);
    background: -o-linear-gradient(top, #A4D3E0 , #A4D3E0 50%, #CBE3EB 50%);
    background: linear-gradient(to top, #A4D3E0 , #A4D3E0 50%, #CBE3EB 50%);
    box-shadow: 2px 2px 3px black;
    display: block;
    padding: 8px 10px;
    text-decoration: none;
}

.main-block-3 {
    margin: 3px;
    padding: 10;
    width: 155px;
    float: left;
}

.main-block-3 > li  {
    display: inline-block;
    position: relative;
}

.main-block-3 a {
    border-radius: 5px;
    color:  #36454A;
    background: -webkit-linear-gradient(top, #A4D3E0 , #A4D3E0 50%, #CBE3EB 50%);
    background: -o-linear-gradient(top, #A4D3E0 , #A4D3E0 50%, #CBE3EB 50%);
    background: linear-gradient(to top, #A4D3E0 , #A4D3E0 50%, #CBE3EB 50%);
    box-shadow: 2px 2px 3px black;
    display: block;
    padding: 8px 10px;
    text-decoration: none;
}

</style>

<body><div class="name"><a href="#name"><h2 style="color:white">ЗАГОЛОВОК<h2></a></div>
  <ul class="main-block-1">
  <li><a class="class1" href="#block1">БЛОК 1</a>
    <ul class="services1">
      <li><a href="#serv">Услуги</a>
      <li><a href="#workers">Сотрудники</a></li>
      <li><a href="#other">Другое</a></li>
      </ul><!--services-->
    </li><!--блок-1-->
  </ul><!--main-block 1-->
  <!--блок 2-->
  <ul class="main-block-2">
    <li><a class="class1" href="#block2">БЛОК 2</a>    
    </li><!--блок-2-->
  </ul><!--main-block 2-->
  <ul class="main-block-3">
    <li><a class="class1" href="#block3">БЛОК 3</a>    
    </li><!--блок-3-->
  </ul><!--main-block 3-->
</body>
</html>
 

Вложения

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 137

clean-nt

Member
Регистрация
07.11.2018
Сообщения
19
И ещё два вопроса:

1. можно ли с помощью css свойств (без использования javascript) написать код так, чтобы "прослеживался весь путь наведения". Т.е. чтобы красный цвет был сначала на "БЛОК 1", когда выбрано подменю "Дизайн", ссылка "БЛОК 1" оставалась красного цвета, и ссылка "Дизайн" была красного цвета, и при наведении на ссылку "Интерьер" - ссылки "БЛОК 1, Дизайн, Интерьер" были одним цветом?

2. можно ли с помощью css свойств (без использования javascript) сдвинуть влево открывающиеся подменю (рисунок css primer4)?
Код:
<!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: 900px;
    padding: 0;
    font-family: Arial, sans-serif;
    font-size: 14px;
}
	
.name {
    text-align: center;
    padding: 1px;
    color: #00ff00;
    border: solid 1px black;
    background: url(wp_sand.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;	
	width: 915px; 
    height: 50px; 
	margin:0 auto; 
}

a.class1 
{ 
    width: 155px; 
    height: 30px; 
	display: block;
	text-align: center;
	font-weight: bold;
	margin: 3px;
}

.main-block-1 {
    margin: 3px;
    padding: 10;
    width: 155px;
	float: left;
}

.main-block-1 > li  {
    display: inline-block;
    position: relative;
	white-space: nowrap;
}

.main-block-1 a {
    border-radius: 5px;
    color: #fff;
    background: #22B14C;
    display: block;
    padding: 8px 10px;
	text-decoration: none;
}

.main-block-1 a:hover {
    background:  #CA101D;
	color: #fff;
}

.main-block-1 .services1 {
    position: absolute;
    margin: 0;
    padding: 0;
    display: none;
}

.main-block-1 > li:hover .services1 {
    display: block;
}

.services1 > li {
    display: inline-block;
}

.services1 a {
    border-radius: 5px;
    color: #fff;
    background: #22B14C;
    display: block;
    padding: 8px 10px;
	text-decoration: none;
}

.services1 a:hover {
    background:  #CA101D;
	color: #fff;
}

.services1 .services2 {
    position: absolute;
    margin: 0;
    padding: 0;
    display: none;
}

.services1 > li:hover .services2 {
    display: block;
}

.services2 > li {
    display: inline-block;
}

.main-block-2 {
    margin: 3px;
    padding: 10;
    width: 155px;
	float: left;
}

.main-block-2 > li  {
    display: inline-block;
    position: relative;
}

.main-block-2 a {
    border-radius: 5px;
    color: #fff;
    background: #22B14C;
    display: block;
    padding: 8px 10px;
	text-decoration: none;
}

.main-block-3 {
    margin: 3px;
    padding: 10;
    width: 155px;
	float: left;
}

.main-block-3 > li  {
    display: inline-block;
    position: relative;
}

.main-block-3 a {
    border-radius: 5px;
    color: #fff;
    background: #22B14C;
    display: block;
    padding: 8px 10px;
	text-decoration: none;
}

</style>

<body><div class="name"><a href="#name"><h2 style="color:white">ЗАГОЛОВОК<h2></a></div>
  <ul class="main-block-1">
    <li><a class="class1" href="#block1">БЛОК 1</a>
	  <ul class="services1">
	    <li><a href="#serv">Услуги</a>
		  <ul class="services2">
		    <li><a href="#serv">Разработка</a></li>
		  </ul>
		</li>  
	    <li><a href="#workers">Дизайн</a>
		  <ul class="services2">
		    <li><a href="#in">Интерьер</a></li>
			<li><a href="#ex">Экстерьер</a></li>
		  </ul>
		</li>  
	    <li><a href="#other">Другое</a></li>
	  </ul><!--services-->
	</li><!--блок-1-->
  </ul><!--main-block 1-->
  <!--блок 2--> 
  <ul class="main-block-2">
    <li><a class="class1" href="#block2">БЛОК 2</a>	
    </li><!--блок-2-->
  </ul><!--main-block 2-->
  <ul class="main-block-3">
    <li><a class="class1" href="#block3">БЛОК 3</a>	
    </li><!--блок-3-->
  </ul><!--main-block 3-->
</body>
</html>
 

Вложения

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 137
Последующие вопросы задавайте оставляя код на jsfiddle

1) Да, ховер надо перенести на li

li:hover{
background: #CA101D;
}
В остальных местах убрать окрашивание
Чтобы понимать как оно работает - давным давно делал демку кому-то из местных
http://demo.g63.ru/table_hover.html

2) Да. Для этого родителю services2 задать left 0
 

clean-nt

Member
Регистрация
07.11.2018
Сообщения
19
BaNru сказал(а):
Последующие вопросы задавайте оставляя код на jsfiddle

1) Да, ховер надо перенести на li

li:hover{
background: #CA101D;
}
В остальных местах убрать окрашивание
Чтобы понимать как оно работает - давным давно делал демку кому-то из местных
http://demo.g63.ru/table_hover.html

2) Да. Для этого родителю services2 задать left 0
Спасибо Вам большое!
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 137
Потому что margin: 3px;
 

clean-nt

Member
Регистрация
07.11.2018
Сообщения
19
BaNru сказал(а):
Потому что margin: 3px;
Сделал:

li:hover{
background: #CA101D;
}

Убрал окрашивание в других местах.
Почему ссылки полностью не выделены красным цветом при наведении?
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 137
Потому что слоем выше стоит окрашивание
Код:
.main-block-1 a {
    background: #22B14C;
}
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 137
Тут главное: хоть что-нибудь понял из того что делал?
 

clean-nt

Member
Регистрация
07.11.2018
Сообщения
19
Здравствуйте.

http://jsfiddle.net/1mu8L7dg/3/
По умолчанию: cлева ТИП, справа БЛОК1.
Можно ли сделать так, чтобы при наведении на БЛОК1, слева (под ТИП) появлялось МЕНЮ, далее, при наведении на Услуги, слева появлялось ВИДЫ, и МЕНЮ при этом не исчезало.
С помощью чего это сделать: "ul class" или <img>?
 
Статус
Закрыто для дальнейших ответов.
Верх Низ