Question

我正在尝试为我的妈妈创建一个新网站，我正在使用导航栏。我有下拉菜单等工作，但没有正确对齐。

<!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>

服务的下拉栏未正确对齐。

Answer 1

您希望下拉列表与其父容器的左端对齐，而不是右：-100，只需将下拉列表向左移动：0;在悬停。此外，它还继承了40px的填充，因此将其设置为0，一切看起来都不错。

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

Answer 2

您可以为hidden元素添加新类并设置绝对位置：

这样的事情：

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

看看这个 https://jsfiddle.net/9e43Lbx9/

Answer 3

您拥有的下拉列表ul是继承以下css的左侧填充：

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

所以只需使用以下内容{@ 1}}下载{<1}}即可。

ul

CSS导航下拉列表未正确对齐

3 个答案: