CSS-навигация выпадающего не выравнивается должным образом

Я пытаюсь создать новый сайт для своей мамы, и сейчас я работаю над панелью навигации. У меня есть выпадающее меню и т. Д., Но оно не правильно выровнено.CSS-навигация выпадающего не выравнивается должным образом

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
    <title>Navigation Menu</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="style.css"> 
<style type="text/css"> 
ul { 
list-style: none; 
padding-left: 400px; 
width: auto; 
margin-left: auto; 
margin-right: auto; 
margin: 0px; 
} 
ul li { 
display: block; 
position: relative; 
float: left; 
border:1px solid #878E63 
} 
li ul { 
display: none; 
} 
ul li a { 
display: block; 
background: #878E63; 
padding: 5px 10px 5px 10px; 
text-decoration: none; 
white-space: nowrap; 
color: #F1F0D1; 
} 
ul li a:hover { 
background: #111; 
} 
li:hover ul { 
display: block; 
position: absolute; 
right: -100px; 
} 
li:hover li { 
float: none; 
text-align: center; 
} 
li:hover a { 
background: #f00; 
} 
li:hover li a:hover { 
background: #000; 
} 
#drop-nav li ul li { 
    border-top: 0px; 
} 
</style> 
    </head> 
<body> 
    <ul id="menu"> 
     <li><a href="Home.html">Home</a></li> 
     <li> 
      <a href="#">Services</a> 
      <ul class="hidden"> 
       <li><a href="#">Threading</a></li> 
       <li><a href="#">Waxing</a></li> 
       <li><a href="#">Mehndi/Henna</a></li> 
       <li><a href="#">Facial</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Media</a></li> 
     <li><a href="#">Testimonial</a></li> 
     <li><a href="#">Career</a></li> 
     <li><a href="#">Client</a></li> 
     <li><a href="#">Contact Us</a></li> 
    </ul> 
</body> 
</html>

Выпадающий планшет для услуг неправильно выровнен.

источник

2016-12-19 ConfusedCoder

Вы хотите, чтобы выпадающий список был выровнен с левым концом его родительского контейнера, а вместо права: -100, просто выведите выпадающее меню ul: 0; при наведении. Также он наследует 40px отступов, поэтому установите это на 0, и все выглядит хорошо.

li:hover ul { 
    display: block; 
    position: absolute; 
    left: 0px; 
    padding:0px; 
}

источник

2016-12-19 20:48:55 Benneb10

Вы можете добавить новый класс для вашего hidden элемента и установить абсолютную позицию:

Что-то вроде этого:

.hidden{ 
    position:absolute; 
    left:-54%; 
}

Посмотрите на этот https://jsfiddle.net/9e43Lbx9/

источник

2016-12-19 20:50:20 akdsfjakls

выпадающий список ul у вас есть наложение слева от следующих css:

ul { 
list-style: none; 
padding-left: 400px; 
width: auto; 
margin-left: auto; 
margin-right: auto; 
margin: 0px; 
}

Так просто сделать, что отступы уходят в раскрывающемся меню ul с помощью:

li:hover ul { 
display: block; 
position: absolute; 
padding:0px; 
}

источник

2016-12-19 20:54:54 Jay

CSS-навигация выпадающего не выравнивается должным образом

ответ

Смежные вопросы