1

Не работает выпадающее меню, помогите, пожалуйста. Только учусь, ошибок, наверное, много.

body {
  background-color: black;
}

nav {
  padding: 67px 0px 120px 930px;
  margin: 0px;
}

nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative
}

nav ul li {
  margin: 0 0 0px;
  display: inline-block;
}

nav a {
  display: block;
  padding: 0 80px 0px 0;
  color: #FFF;
  font-size: 18x;
  line-height: 0px;
  text-decoration: none;
}

nav a:hover {
  border: 3px #fff;
}

nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
}

nav ul li:hover>ul {
  display: inherit;
}

nav ul ul li {
  min-width: 70px;
  float: none;
  display: list-item;
  position: relative;
  color: #fff;
}
<nav>
  <ul>
    <li><a href="">ДЕЯТЕЛЬНОСТЬ</a>
      <ul>
        <li><a href="">Транспорт и логистика</a></li>
        <li><a href="">Строительство и монтаж</a></li>
        <li><a href="">Оптово-розничная торговля</a></li>
      </ul>
    </li>
    <li><a href="">КОНТАКТЫ</a></li>
  </ul>
</nav>

1
  • В будущем используйте классы для тегов, а то в коде можно запутаться. 14 фев 2019 в 10:52

2 ответа 2

3

Исправил

body {
  background-color: black;
}

nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
  position: absolute;
}

nav ul li {
  margin: 0 0 0px;
  display: inline-grid;
}

nav a {
  display: block;
  padding: 0 80px 0px 0;
  color: #FFF;
  font-size: 18x;
  line-height: 0px;
  text-decoration: none;
}

nav a:hover {
  border: 3px #fff;
}

nav ul ul {
  display: none;
  position: relative;
  top: 20px;
}

nav ul li:hover>ul {
  display: block;
}

nav ul ul li {
  min-width: 70px;
  float: none;
  display: list-item;
  position: relative;
  color: #fff;
}

nav ul ul li a {
  display: inline;
  padding: 0px;
}
<nav>
  <ul>
    <li><a href="">ДЕЯТЕЛЬНОСТЬ</a>
      <ul>
        <li><a href="">Транспорт и логистика</a></li>
        <li><a href="">Строительство и монтаж</a></li>
        <li><a href="">Оптово-розничная торговля</a></li>
      </ul>
    </li>
    <li><a href="">КОНТАКТЫ</a></li>
  </ul>
</nav>

2

Для решения конкретно вашей задачи, если не переделывать, достаточно добавить строку

margin-top: 20px;

В стиль nav ul li.

Т.е. должно получится вот так:

nav ul li {
  display: inline-block;
  margin-top: 20px;
}

А так же подготовил для вас простенький пример. Может пригодится.

ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.menu>li {
  float: left;
  position: relative;
}

ul.menu>li>a {
  display: block;
  padding: 10px;
  color: white;
  background-color: gray;
  text-decoration: none;
}

ul.menu>li>a:hover {
  background-color: black;
}

ul.submenu {
  display: none;
  position: absolute;
  width: 120px;
  top: 36px;
  left: 0;
  background-color: white;
  border: 1px solid gray;
}

ul.submenu>li {
  display: block;
}

ul.submenu>li>a {
  display: block;
  padding: 10px;
  color: white;
  background-color: gray;
  text-decoration: none;
}

ul.submenu>li>a:hover {
  background-color: black;
}

ul.menu>li:hover>ul.submenu {
  display: block;
}
<ul class="menu">
  <li><a href=#>Menu</a>
    <ul class="submenu">
      <li><a href=#>Submenu</a></li>
      <li><a href=#>Submenu</a></li>
      <li><a href=#>Submenu</a></li>
    </ul>
  </li>
</ul>

1

Ваш ответ

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

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