0

Подскажите, пожалуйста. Вроде проверил все основные нюансы, посмотрел основные youtube уроки про комбинации селекторов, но все равно второй вложенный список (в третьем LI основного списка) все равно получается смещенным на основную таблицу. Хотя первый размещается корректно

При этом я вижу то, что в снипете отображение идет корректо, а вот в локальном браузере нет.. введите сюда описание изображения

 *{
    margin: 0px;
    padding: 0px;
}
.main-menu *{
  list-style: none;
}
.main-menu div ul{
  display: flex;
  margin-top: 100px;
  margin-left: 100px;
}
.main-menu a{
  color:red;
  display: block;
  text-align: center;
}
.main-menu li{
  border: 1px solid black;
  width: 200px;
  position: relative;
}
.main-menu ul ul{
  position: absolute;
  display: none;
  padding:0;
  margin: 0;
  left:0;
}
.main-menu ul li:hover ul{
  display:block;
}
 <!DOCTYPE html>
    <html lang="ru" dir="ltr">
      <head>
      <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
      <title>MoreDoor</title>
      <link rel="stylesheet" type="text/css" href="resources/css/style.css">
      <script src="https://kit.fontawesome.com/381ef55a42.js" crossorigin="anonymous"></script>
    
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Cuprum:wght@500&display=swap" rel="stylesheet">
    
     </head>
    
    <body>
    <header>
        <nav class="main-menu">
            <div>
            <ul>
                <li><a href="index.html"><i class="fas fa-home"       ></i>Главная</a></li>
                <li><a href="index.html"><i class="fas fa-door-open"  ></i>Межкомнатные двери</a>
                  <ul>
                    <li><a href="index.html">Первые</a></li>
                    <li><a href="index.html">Вторые</a></li>
                    <li><a href="index.html">Третьи</a></li>
                    <li><a href="index.html">Четвертые</a></li>
                    <li><a href="index.html">Пятые</a></li>
                  </ul>
                </li>
                <li><a href="index.html"><i class="fas fa-door-closed"></i>Входные Двери</a>
                  <ul>
                    <li><a href="index.html">Шестые</a></li>
                    <li><a href="index.html">Седьмые</a></li>
                    <li><a href="index.html">Восьмые</a></li>
                    <li><a href="index.html">Девятые</a></li>
                    <li><a href="index.html">Десятые</a></li>
                  </ul>
                </li>
                <li><a href="index.html"><i class="fas fa-paperclip"  ></i>Фурнитура</a></li>
                <li><a href="index.html"><i class="fas fa-diagnoses   "></i>Услуги</a></li>
                <li><a href="index.html"><i class="fas fa-highlighter"></i>Плинтусы</a></li>
                <li><a href="index.html"><i class="fas fa-info-circle"></i>О компании</a></li>
                <li><a href="index.html"><i class="fas fa-percentage"></i>Акции</a></li>
                <li><a href="index.html"><i class="fas fa-atlas"></i>Контакты</a></li>
            </ul>
            </div>
        </nav>
    </header>
    </body>
    
    </html>

1 ответ 1

0

Разобрался. У родительского li нужно было поставить position:relative (это было) и четкую высоту к примеру в 40px (этого не было). После этого, у дочернего li нужно было поставить position: absolute (это было. требуется для ориентации относительно родителя) и смещение top:40px (этого не было) как раз в высоту родительского блока. И все будет ровно.

 *{
    margin: 0px;
    padding: 0px;
}
.main-menu *{
  list-style: none;
}
.main-menu div ul{
  display: flex;
  margin-top: 100px;
  margin-left: 100px;
}
.main-menu a{
  color:red;
  display: block;
  text-align: center;
}
.main-menu li{
  border: 1px solid black;
  width: 200px;
  position: relative;
  height:40px;

}
.main-menu ul ul{
  position: absolute;
  display: none;
  padding:0;
  margin: 0;
  left:0;
  top: 40px;
}
.main-menu ul li:hover ul{
  display:block;
}
 <!DOCTYPE html>
    <html lang="ru" dir="ltr">
      <head>
      <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
      <title>MoreDoor</title>
      <link rel="stylesheet" type="text/css" href="resources/css/style.css">
      <script src="https://kit.fontawesome.com/381ef55a42.js" crossorigin="anonymous"></script>
    
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Cuprum:wght@500&display=swap" rel="stylesheet">
    
     </head>
    
    <body>
    <header>
        <nav class="main-menu">
            <div>
            <ul>
                <li><a href="index.html"><i class="fas fa-home"       ></i>Главная</a></li>
                <li><a href="index.html"><i class="fas fa-door-open"  ></i>Межкомнатные двери</a>
                  <ul>
                    <li><a href="index.html">Первые</a></li>
                    <li><a href="index.html">Вторые</a></li>
                    <li><a href="index.html">Третьи</a></li>
                    <li><a href="index.html">Четвертые</a></li>
                    <li><a href="index.html">Пятые</a></li>
                  </ul>
                </li>
                <li><a href="index.html"><i class="fas fa-door-closed"></i>Входные Двери</a>
                  <ul>
                    <li><a href="index.html">Шестые</a></li>
                    <li><a href="index.html">Седьмые</a></li>
                    <li><a href="index.html">Восьмые</a></li>
                    <li><a href="index.html">Девятые</a></li>
                    <li><a href="index.html">Десятые</a></li>
                  </ul>
                </li>
                <li><a href="index.html"><i class="fas fa-paperclip"  ></i>Фурнитура</a></li>
                <li><a href="index.html"><i class="fas fa-diagnoses   "></i>Услуги</a></li>
                <li><a href="index.html"><i class="fas fa-highlighter"></i>Плинтусы</a></li>
                <li><a href="index.html"><i class="fas fa-info-circle"></i>О компании</a></li>
                <li><a href="index.html"><i class="fas fa-percentage"></i>Акции</a></li>
                <li><a href="index.html"><i class="fas fa-atlas"></i>Контакты</a></li>
            </ul>
            </div>
        </nav>
    </header>
    </body>
    
    </html>

Ваш ответ

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

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