Проблема с выпадающим меню

253

30 декабря 2018, 04:00

имеется проблема с выпадающим меню. В частности с КОНТАКТАМИ, оно почему-то ездит при сжимании страницы, а должно быть зафиксированным как в случае с УСЛУГАМИ. С чем это может быть связано?

* { 
    padding: 0; 
    margin: 0; 
    font-family: Verdana, sans-serif;    
} 
 
ul { 
    background-color: #689cd2; 
    display: flex; 
    justify-content: center; 
 
} 
 
ul li:hover { 
    background-color: gray; 
    transition: .3s; 
} 
 
ul li { 
    list-style-type: none; 
    padding: 15px; 
} 
 
ul li a { 
    text-decoration: none; 
    color: black; 
} 
 
i.fa {  
    padding-right: 5px; 
    font-size: 20px; 
    vertical-align: middle; 
} 
 
i.fa-angle-down { 
    padding-left: 5px; 
    vertical-align: middle; 
} 
 
.nav li .submenu { 
    display: none; 
    border-top: 1px solid transparent; 
    width: 133px; 
    text-align: center; 
} 
 
.nav li > ul li { 
    border-bottom: 1.2px solid white; 
} 
 
.nav li:hover .submenu { 
    position: absolute; 
    display: block; 
    top: 52px; 
    right: 50%; 
} 
 
.nav li .submenu-second { 
    display: none; 
    width: 133px; 
    border-top: 1px solid transparent; 
    text-align: center; 
 
} 
 
.nav li:hover .submenu-second  { 
    display: block; 
    position: absolute; 
    top: 52px; 
    right: 33.2%; 
} 
 
 
 
 
@media screen and (max-width: 530px) { 
 
	ul { 
		display: block; 
		text-align: center;	 
	} 
 
	.nav li .submenu { 
		display: none; 
		width: 130px; 
		text-align: center; 
		background-color: #509be8; 
	} 
 
	.nav li > ul li { 
		border-bottom: 1px solid white; 
	} 
 
	.nav li:hover .submenu { 
		position: absolute; 
		display: block; 
		top: 51px; 
		right: 7%; 
	} 
 
 
	.nav li .submenu-second { 
		display: none; 
		width: 130px; 
		text-align: center; 
		background-color: #509be8; 
	} 
 
	.nav li > ul li { 
		border-bottom: 1px solid white; 
	} 
 
	.nav li:hover .submenu-second { 
		position: absolute; 
		display: block; 
		top: 20%; 
		right: 7%; 
 
	} 
 
}

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> 
</head> 
<body> 
 
<div class="header"> 
	<nav class="nav"> 
		<ul> 
			<li><a href="#"><i class="fa fa-home" aria-hidden="true"></i>Главная</a></li> 
			<li><a href="#"><i class="fa fa-shopping-basket" aria-hidden="true"></i>Услуги<i class="fa fa-angle-down"></i></a> 
 
             <ul class="submenu"> 
             	<li><a href="#">Услуга 1</a></li> 
             	<li><a href="#">Услуга 2</a></li> 
             	<li><a href="#">Услуга 3</a></li> 
             </ul> 
      
			</li> 
			<li><a href="#"><i class="fa fa-newspaper-o" aria-hidden="true"></i>Новости</a></li> 
			<li class="main"><a href="#"><i class="fa fa-phone" aria-hidden="true"></i>Контакты</a> 
                 
                <ul class="submenu-second"> 
                	<li><a href="#">Контакт 1</a></li> 
                	<li><a href="#">Контакт 2</a></li> 
                	<li><a href="#">Контакт 3</a></li> 
                </ul> 
 
			</li> 
		</ul> 
	</nav> 
</div>	   
 
</body>

Answer 1

Для ul li - position: relative;

Также для submenu - left: 0, а для правого right: 0;

Пример

* { 
  padding: 0; 
  margin: 0; 
  font-family: Verdana, sans-serif; 
} 
 
ul { 
  background-color: #689cd2; 
  display: flex; 
  justify-content: center; 
} 
 
ul li:hover { 
  background-color: gray; 
  transition: .3s; 
} 
 
ul li { 
  list-style-type: none; 
  padding: 15px; 
  position: relative; 
} 
 
ul li a { 
  text-decoration: none; 
  color: black; 
} 
 
i.fa { 
  padding-right: 5px; 
  font-size: 20px; 
  vertical-align: middle; 
} 
 
i.fa-angle-down { 
  padding-left: 5px; 
  vertical-align: middle; 
} 
 
.nav li .submenu { 
  display: none; 
  border-top: 1px solid transparent; 
  width: 133px; 
  text-align: center; 
} 
 
.nav li>ul li { 
  border-bottom: 1.2px solid white; 
} 
 
.nav li:hover .submenu { 
  position: absolute; 
  display: block; 
  top: 52px; 
  left: 0; 
} 
 
.nav li .submenu-second { 
  display: none; 
  width: 133px; 
  border-top: 1px solid transparent; 
  text-align: center; 
} 
 
.nav li:hover .submenu-second { 
  display: block; 
  position: absolute; 
  top: 52px; 
  right: 0; 
} 
 
@media screen and (max-width: 530px) { 
  ul { 
    display: block; 
    text-align: center; 
  } 
  .nav li .submenu { 
    display: none; 
    width: 130px; 
    text-align: center; 
    background-color: #509be8; 
  } 
  .nav li>ul li { 
    border-bottom: 1px solid white; 
  } 
  .nav li:hover .submenu { 
    position: absolute; 
    display: block; 
    top: 51px; 
    right: 7%; 
  } 
  .nav li .submenu-second { 
    display: none; 
    width: 130px; 
    text-align: center; 
    background-color: #509be8; 
  } 
  .nav li>ul li { 
    border-bottom: 1px solid white; 
  } 
  .nav li:hover .submenu-second { 
    position: absolute; 
    display: block; 
    top: 20%; 
    right: 7%; 
  } 
}

<!DOCTYPE html> 
<html> 
 
<head> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> 
</head> 
 
<body> 
 
  <div class="header"> 
    <nav class="nav"> 
      <ul> 
        <li><a href="#"><i class="fa fa-home" aria-hidden="true"></i>Главная</a></li> 
        <li><a href="#"><i class="fa fa-shopping-basket" aria-hidden="true"></i>Услуги<i class="fa fa-angle-down"></i></a> 
 
          <ul class="submenu"> 
            <li><a href="#">Услуга 1</a></li> 
            <li><a href="#">Услуга 2</a></li> 
            <li><a href="#">Услуга 3</a></li> 
          </ul> 
 
        </li> 
        <li><a href="#"><i class="fa fa-newspaper-o" aria-hidden="true"></i>Новости</a></li> 
        <li class="main"><a href="#"><i class="fa fa-phone" aria-hidden="true"></i>Контакты</a> 
 
          <ul class="submenu-second"> 
            <li><a href="#">Контакт 1</a></li> 
            <li><a href="#">Контакт 2</a></li> 
            <li><a href="#">Контакт 3</a></li> 
          </ul> 
 
        </li> 
      </ul> 
    </nav> 
  </div> 
 
</body>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Не могу вставить фоновое изображение на сайт, что делать?

Вставил картинку, обновляю страницу - фонового изображения нет, почему? Что я не так сделал?

162

HTML

Передача параметров HTML/JavaScript

Есть первая страница, на ней два поля ввод и кнопка "Войти", как по нажатию кнопки перейти на другую страницу, и передать в её JavaScript, строки...

178

HTML

Проверка павильности email при onblur

Мне нужно чтобы когда фокус исчезает из поля email то должна выполняться проверка на правильность, но у меня постоянно показывает, что email неверный,...

204

jQuery

Отобразить перенос строк из json ответа

Получаю ответ ajax'ом от сервера в формате json такого вида: {"success":true,"data":{"answer":"first line\r\nsecond line boom\r\n123","answer_id":433}}

193