0

Приветствую! Помогите разобраться с вложенными списками HTML. Делаю небольшое меню при наведении на пункт которого выпадает еще одно меню с пунктами. Однако, выпадающее меню оказывается по вертикали ниже, чем сам пункт, по наведению на который оно должно открываться. Сейчас меню выглядит так :

.dws-menu {
  margin: 0;
  padding: 0;
}

.dws-menu ul {
  list-style: none;
}

.dws-menu>ul {
  display: flex;
  justify-content: center;
}

.dws-menu>ul li {
  border: 1px solid #8f8383;
  width: auto;
}

.dws-menu>ul li>ul li {
  width: 220px;
  margin: 5px;
}

.dws-menu li a:hover {
  color: darkgray;
  background-color: bisque;
}

.dws-menu>ul li a {
  margin: 1px;
  display: block;
  cursor: pointer;
  height: 21px;
  padding: 10px 10px 10px 10px;
  background: #808080;
  color: #454547;
  text-decoration: none;
  text-transform: uppercase;
}


/* Sub Menu*/

.dws-menu li ul {
  position: absolute;
  width: auto;
  display: none;
}

.dws-menu li>ul li {
  border: 1px solid #000000;
}

.dws-menu li>ul li a {
  padding: 10px;
  text-transform: none;
  background: darkgray;
}

.dws-menu li>ul li ul {
  position: absolute;
  right: -226px;
  padding-top: -25px;
  /* !!! */
}

.dws-menu li:hover>ul {
  display: block;
}
<nav class="dws-menu">
  <ul>
    <li><a>Лучшие Специалисты</a>
      <ul>
        <li>
          <a>По технологиям</a>
          <ul>
            <li><a>WEB Разработчики</a></li>
            <li><a>Mobile Разработчики</a></li>
            <li><a>Desctop Разработчики</a></li>
          </ul>

          <li>
            <a>По Языкам </a>
            <ul>
              <li><a>c# Разработчики</a></li>
              <li><a>c++ Разработчики</a></li>
              <li><a>Java Разработчики</a></li>
              <li><a>Swift Разработчики</a></li>
              <li><a>Php Разработчики</a></li>
              <li><a>Pyton Разработчики</a></li>
              <li><a>Objective-c Разработчики</a></li>
              <li><a>JavaScript Разработчики</a></li>
            </ul>
          </li>
      </ul>
      </li>
  </ul>
</nav>

В чем ошибка, Как исправить ? Спасибо.

1 ответ 1

1

.dws-menu {
  margin: 0;
  padding: 0;
}

.dws-menu ul {
  list-style: none;
}

.dws-menu>ul {
  display: flex;
  
}

.dws-menu>ul li {
  border: 1px solid #8f8383;
  width: auto;
}

.dws-menu>ul li>ul li {
  width: 220px;
  margin: 5px;
}

.dws-menu li a:hover {
  color: darkgray;
  background-color: bisque;
}

.dws-menu>ul li a {
  margin: 1px;
  display: block;
  cursor: pointer;
  height: 21px;
  padding: 10px 10px 10px 10px;
  background: #808080;
  color: #454547;
  text-decoration: none;
  text-transform: uppercase;
}


/* Sub Menu*/

.dws-menu li ul {
  position: absolute;
  width: auto;
  display: none;
}

.dws-menu li>ul li {
  border: 1px solid #000000;
}

.dws-menu li>ul li a {
  padding: 10px;
  text-transform: none;
  background: darkgray;
}

.dws-menu li>ul li ul {
  margin-top:-49px;
  right: -226px;
  padding-top: -25px;
  /* !!! */
}

.dws-menu li:hover>ul {
  display: block;
}
<nav class="dws-menu">
  <ul>
    <li><a>Лучшие Специалисты</a>
      <ul>
        <li>
          <a>По технологиям</a>
          <ul>
            <li><a>WEB Разработчики</a></li>
            <li><a>Mobile Разработчики</a></li>
            <li><a>Desctop Разработчики</a></li>
          </ul>
        </li>
        <li>
          <a>По Языкам </a>
          <ul>
            <li><a>c# Разработчики</a></li>
            <li><a>c++ Разработчики</a></li>
            <li><a>Java Разработчики</a></li>
            <li><a>Swift Разработчики</a></li>
            <li><a>Php Разработчики</a></li>
            <li><a>Pyton Разработчики</a></li>
            <li><a>Objective-c Разработчики</a></li>
            <li><a>JavaScript Разработчики</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

2
  • Благодарю! Так и думал, что какую то мелочь упустил. 5 ноя 2017 в 16:13
  • Пожалуста... ))
    – C.Raf.T
    5 ноя 2017 в 16:14

Ваш ответ

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

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