Выпадающее меню на CSS3

247
29 мая 2018, 10:40

Стараюсь создать выпадающее меню средствами CSS но подпункты в браузере не отображаются. Вижу только горизонтальное меню.

#content { 
  position: absolute; 
  left: 200px; 
  top: 50px; 
  bottom: 0; 
  right: 0; 
  height: 800px; 
  background: white; 
  border: 2px solid black; 
} 
 
#sidebar { 
  position: absolute; 
  left: 0; 
  top: 50px; 
  bottom: 0; 
  width: 200px; 
  background: gray; 
  border: 2px solid black; 
} 
 
#footer { 
  position: absolute; 
  left: 200px; 
  top: 850px; 
  right: 0; 
  bottom: 0; 
  background: gray; 
  border: 2px solid black; 
} 
 
#nav { 
  width: 100%; 
  height: 50px; 
  margin: 0 auto; 
  background-color: #000000; 
  /*rgb(0, 129, 20);  */ 
} 
 
#nav:before { 
  content: ''; 
  display: block; 
  height: 50px; 
  width: 100%; 
  background: #000; 
  position: absolute; 
  left: 0; 
  z-index: -1; 
} 
 
#nav ul { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  height: 50px; 
} 
 
#nav ul li { 
  display: block; 
  float: left; 
  font-family: Arial, sans-serif; 
  font-size: 20px; 
  position: relative; 
} 
 
#nav ul li a { 
  color: rgb(0, 205, 0); 
  display: block; 
  height: 50px; 
  padding: 0 10px; 
  text-decoration: none; 
  line-height: 50px; 
} 
 
#nav .down { 
  position: absolute; 
  top: 100%; 
  width: 150px; 
  background: #575757; 
  display: none; 
} 
 
#nav .down li { 
  width: 100%; 
  height: 45px; 
} 
 
#nav li:hover .down { 
  display: block; 
} 
 
#nav .down li a { 
  line-height: 45px; 
  height: 45px; 
}
<nav id="nav"> 
  <ul> 
    <li> 
      <a href="">Main</a> 
      <ul class="down"> 
        <li><a href="#">link 1</a></li> 
        <li><a href="#">link 2</a></li> 
        <li><a href="#">link 3</a></li> 
        <li><a href="#">link 4</a></li> 
      </ul> 
    </li> 
    <li><a href="#">Item2</a></li> 
    <li><a href="#">Item3</a></li> 
    <li><a href="#">Item4</a></li> 
    <li><a href="#">Contacts</a></li> 
  </ul> 
</nav> 
 
<div id="sidebar"></div> 
<div id="content"> 
  <br /> 
  <form action="goods.php" method="post"> 
    good's name<br /><br /> 
    <input type="text" name="goods" <br/> 
    <input type="submit" name="btn_select" value="select"> 
    <input type="submit" name="btn_insert" value="insert"> 
  </form> 
</div> 
<div id="footer"></div>

UPDATE: Исправил код. Добавил z-index и субменю появилось но сейчас если медленно наведу курсор на субменю оно исчезает.

Answer 1

Для этого нам нужно провести что то типа проверки и делаем так :

#content { 
  position: absolute; 
  left: 200px; 
  top: 50px; 
  bottom: 0; 
  right: 0; 
  height: 800px; 
  background: white; 
  border: 2px solid black; 
} 
 
#sidebar { 
  position: absolute; 
  left: 0; 
  top: 50px; 
  bottom: 0; 
  width: 200px; 
  background: gray; 
  border: 2px solid black; 
} 
 
#footer { 
  position: absolute; 
  left: 200px; 
  top: 850px; 
  right: 0; 
  bottom: 0; 
  background: gray; 
  border: 2px solid black; 
} 
 
#nav { 
  width: 100%; 
  height: 50px; 
  margin: 0 auto; 
  background-color: #000000; 
  /*rgb(0, 129, 20);  */ 
} 
 
#nav:before { 
  content: ''; 
  display: block; 
  height: 50px; 
  width: 100%; 
  background: #000; 
  position: absolute; 
  left: 0; 
  z-index: -1; 
} 
 
#nav ul { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  height: 50px; 
} 
 
#nav ul li { 
  display: block; 
  float: left; 
  font-family: Arial, sans-serif; 
  font-size: 20px; 
  position: relative; 
} 
 
#nav ul li a { 
  color: rgb(0, 205, 0); 
  display: block; 
  height: 50px; 
  padding: 0 10px; 
  text-decoration: none; 
  line-height: 50px; 
} 
 
#nav .down { 
  position: absolute; 
  top: 100%; 
  width: 150px; 
  background: #575757; 
  display: non; 
  border:1px solid red; 
} 
 
#nav .down li { 
  width: 100%; 
  height: 45px; 
} 
 
#nav li:hover .down { 
  display: block; 
} 
 
#nav .down li a { 
  line-height: 45px; 
  height: 45px; 
}
<nav id="nav"> 
  <ul> 
    <li> 
      <a href="">Main</a> 
      <ul class="down"> 
        <li><a href="#">link 1</a></li> 
        <li><a href="#">link 2</a></li> 
        <li><a href="#">link 3</a></li> 
        <li><a href="#">link 4</a></li> 
      </ul> 
    </li> 
    <li><a href="#">Item2</a></li> 
    <li><a href="#">Item3</a></li> 
    <li><a href="#">Item4</a></li> 
    <li><a href="#">Contacts</a></li> 
  </ul> 
</nav> 
 
<div id="sidebar"></div> 
<div id="content"> 
  <br /> 
  <form action="goods.php" method="post"> 
    good's name<br /><br /> 
    <input type="text" name="goods" <br/> 
    <input type="submit" name="btn_select" value="select"> 
    <input type="submit" name="btn_insert" value="insert"> 
  </form> 
</div> 
<div id="footer"></div>

после чего видим что пункты меню расположены вне родителя, делаем вывод что у нас что то не так , смотрим что родительские пункты имеют float и мы для наших пунктов вложенного меню должны очистить обтекание т.е сделать float:none;

после этого код становится такой

#content { 
  position: absolute; 
  left: 200px; 
  top: 50px; 
  bottom: 0; 
  right: 0; 
  height: 800px; 
  background: white; 
  border: 2px solid black; 
} 
 
#sidebar { 
  position: absolute; 
  left: 0; 
  top: 50px; 
  bottom: 0; 
  width: 200px; 
  background: gray; 
  border: 2px solid black; 
} 
 
#footer { 
  position: absolute; 
  left: 200px; 
  top: 850px; 
  right: 0; 
  bottom: 0; 
  background: gray; 
  border: 2px solid black; 
} 
 
#nav { 
  width: 100%; 
  height: 50px; 
  margin: 0 auto; 
  background-color: #000000; 
  /*rgb(0, 129, 20);  */ 
} 
 
#nav:before { 
  content: ''; 
  display: block; 
  height: 50px; 
  width: 100%; 
  background: #000; 
  position: absolute; 
  left: 0; 
  z-index: -1; 
} 
 
#nav ul { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  height: 50px; 
} 
 
#nav ul li { 
  display: block; 
  float: left; 
  font-family: Arial, sans-serif; 
  font-size: 20px; 
  position: relative; 
} 
 
#nav ul li a { 
  color: rgb(0, 205, 0); 
  display: block; 
  height: 50px; 
  padding: 0 10px; 
  text-decoration: none; 
  line-height: 50px; 
} 
 
#nav .down { 
  position: absolute; 
  top: 100%; 
  width: 150px; 
  height: auto; 
  background: #575757; 
  display: non; 
  z-index: 100; 
  border: 1px solid red; 
  float: none; 
} 
 
#nav .down li { 
  width: 100%; 
  height: 45px; 
} 
 
#nav li:hover .down { 
  display: block; 
} 
 
#nav .down li a { 
  line-height: 45px; 
  height: 45px; 
} 
 
<nav id="nav
<nav id="nav"> 
  <ul> 
    <li> 
      <a href="">Main</a> 
      <ul class="down"> 
        <li><a href="#">link 1</a></li> 
        <li><a href="#">link 2</a></li> 
        <li><a href="#">link 3</a></li> 
        <li><a href="#">link 4</a></li> 
      </ul> 
    </li> 
    <li><a href="#">Item2</a></li> 
    <li><a href="#">Item3</a></li> 
    <li><a href="#">Item4</a></li> 
    <li><a href="#">Contacts</a></li> 
  </ul> 
</nav> 
 
<div id="sidebar"></div> 
<div id="content"> 
  <br /> 
  <form action="goods.php" method="post"> 
    good's name<br /><br /> 
    <input type="text" name="goods" <br/> 
    <input type="submit" name="btn_select" value="select"> 
    <input type="submit" name="btn_insert" value="insert"> 
  </form> 
</div> 
<div id="footer"></div>

после этих манипуляций мы видим пункты скрытого меню в составе выпадающего и теперь вернём на место display:none; проверяем и видим что меню появляется но не возможно провести click по ссылкам : это означает что оно слишком низко расположено, действие hover пропадает и исправляем css нашего выпадающего меню придаём (для видимости нашим li background)и видим опять отступ и добавляем в начало css это

*{margin:0; padding:0;}

и задаём пунктам меню высоту

#nav ul li {height:100%;} на выходе получаем готовое меню с выпадающим списком без косяков 

* { 
  margin: 0; 
  padding: 0; 
} 
 
#content { 
  position: absolute; 
  left: 200px; 
  top: 50px; 
  bottom: 0; 
  right: 0; 
  height: 800px; 
  background: white; 
  border: 2px solid black; 
} 
 
#sidebar { 
  position: absolute; 
  left: 0; 
  top: 50px; 
  bottom: 0; 
  width: 200px; 
  background: gray; 
  border: 2px solid black; 
} 
 
#footer { 
  position: absolute; 
  left: 200px; 
  top: 850px; 
  right: 0; 
  bottom: 0; 
  background: gray; 
  border: 2px solid black; 
} 
 
#nav { 
  width: 100%; 
  height: 50px; 
  margin: 0 auto; 
  background-color: #000000; 
  /*rgb(0, 129, 20);  */ 
} 
 
#nav:before { 
  content: ''; 
  display: block; 
  height: 50px; 
  width: 100%; 
  background: #000; 
  position: absolute; 
  left: 0; 
  z-index: -1; 
} 
 
#nav ul { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  height: 50px; 
} 
 
#nav ul li { 
  display: block; 
  float: left; 
  height: 10; 
  font-family: Arial, sans-serif; 
  font-size: 20px; 
  position: relative; 
} 
 
#nav ul li a { 
  color: rgb(0, 205, 0); 
  display: block; 
  height: 50px; 
  padding: 0 10px; 
  text-decoration: none; 
  line-height: 50px; 
} 
 
#nav .down { 
  position: absolute; 
  top: 100%; 
  width: 150px; 
  height: auto; 
  background: #cc0000; 
  display: none; 
  z-index: 100; 
  float: none; 
} 
 
#nav .down li { 
  width: 100%; 
  height: 45px; 
} 
 
#nav li:hover .down { 
  display: block; 
} 
 
#nav .down li a { 
  line-height: 45px; 
  height: 45px; 
} 
 
<nav id="nav
<nav id="nav"> 
  <ul> 
    <li> 
      <a href="">Main</a> 
      <ul class="down"> 
        <li><a href="#">link 1</a></li> 
        <li><a href="#">link 2</a></li> 
        <li><a href="#">link 3</a></li> 
        <li><a href="#">link 4</a></li> 
      </ul> 
    </li> 
    <li><a href="#">Item2</a></li> 
    <li><a href="#">Item3</a></li> 
    <li><a href="#">Item4</a></li> 
    <li><a href="#">Contacts</a></li> 
  </ul> 
</nav> 
 
<div id="sidebar"></div> 
<div id="content"> 
  <br /> 
  <form action="goods.php" method="post"> 
    good's name<br /><br /> 
    <input type="text" name="goods" <br/> 
    <input type="submit" name="btn_select" value="select"> 
    <input type="submit" name="btn_insert" value="insert"> 
  </form> 
</div> 
<div id="footer"></div>

Answer 2

В таком случае вам поможет свойство z-index, которое отвечает за перекрытие элементов у блоков с position: relative, absolute или fixed. См. стили к #nav li:hover .down.

#content { 
  position: absolute; 
  left: 200px; 
  top: 50px; 
  bottom: 0; 
  right: 0; 
  height: 800px; 
  background: white; 
  border: 2px solid black; 
} 
 
#sidebar { 
  position: absolute; 
  left: 0; 
  top: 50px; 
  bottom: 0; 
  width: 200px; 
  background: gray; 
  border: 2px solid black; 
} 
 
#footer { 
  position: absolute; 
  left: 200px; 
  top: 850px; 
  right: 0; 
  bottom: 0; 
  background: gray; 
  border: 2px solid black; 
} 
 
#nav { 
  width: 100%; 
  height: 50px; 
  margin: 0 auto; 
  background-color: #000000; 
  /*rgb(0, 129, 20);  */ 
} 
 
#nav:before { 
  content: ''; 
  display: block; 
  height: 50px; 
  width: 100%; 
  background: #000; 
  position: absolute; 
  left: 0; 
  z-index: -1; 
} 
 
#nav ul { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  height: 50px; 
} 
 
#nav ul li { 
  display: block; 
  float: left; 
  font-family: Arial, sans-serif; 
  font-size: 20px; 
  position: relative; 
} 
 
#nav ul li a { 
  color: rgb(0, 205, 0); 
  display: block; 
  height: 50px; 
  padding: 0 10px; 
  text-decoration: none; 
  line-height: 50px; 
} 
 
#nav .down { 
  position: absolute; 
  top: 100%; 
  width: 150px; 
  background: #575757; 
  display: none; 
} 
 
#nav .down li { 
  width: 100%; 
  height: 45px; 
} 
 
#nav li:hover .down { 
  display: block; 
  z-index: 400; 
} 
 
#nav .down li a { 
  line-height: 45px; 
  height: 45px; 
}
<nav id="nav"> 
  <ul> 
    <li> 
      <a href="">Main</a> 
      <ul class="down"> 
        <li><a href="#">link 1</a></li> 
        <li><a href="#">link 2</a></li> 
        <li><a href="#">link 3</a></li> 
        <li><a href="#">link 4</a></li> 
      </ul> 
    </li> 
    <li><a href="#">Item2</a></li> 
    <li><a href="#">Item3</a></li> 
    <li><a href="#">Item4</a></li> 
    <li><a href="#">Contacts</a></li> 
  </ul> 
</nav> 
 
<div id="sidebar"></div> 
<div id="content"> 
  <br /> 
  <form action="goods.php" method="post"> 
    good's name<br /><br /> 
    <input type="text" name="goods" <br/> 
    <input type="submit" name="btn_select" value="select"> 
    <input type="submit" name="btn_insert" value="insert"> 
  </form> 
</div> 
<div id="footer"></div>

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте hersones.com.ua
ТОП-10
READ ALSO
Ошибка setTimeout
javascript

Ошибка setTimeout

Всем привет

 202
encodeURI() - результат с русскими символами
javascript

encodeURI() - результат с русскими символами

Необходимо закодировать строку "тест!" в url с текстом "тест%21", на деле получается "%D1%82%D0%B5%D1%81%D1%82%21"

 198
Выбрать текст в кавычках и поместить в span
javascript

Выбрать текст в кавычках и поместить в span

Требуется то что в кавычках выделить в spanЗнаю что можно с помощью регулярных выражений

 180
Можно ли отправить бекап файла в облако?
javascript

Можно ли отправить бекап файла в облако?

Можно ли отправить файл backup/scriptjs на какой-нибудь сервер?

 193