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

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>

1 ответ 1

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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