Question

下拉菜单未正确对齐。由于某些原因，下拉选项是正确的，而不是对齐的（＆＃39;学生＆＃39;，＃39;程序＆＃39;培训＆＃39;）。这是菜单的css代码：

 <style type="text/css">
 #drop-nav {
 width: 1000px;
 }
 ul {
 margin: 0px;
 padding: 0px;
 list-style-type: none;
list-style-image: none;
list-style-position: outside;
overflow: visible;
position: static;
}
ul li {
border: 1px solid #000000;
display: block;
position: relative;
float: left;
right: -4px;
background-color: white;
}
li ul {
display: none;
background-color: #3333ff;
}
ul li a {
padding: 10px 18px 5px 90px;
background: #3333ff none repeat scroll 0% 50%;
text-decoration: none;
white-space: nowrap;
color: #ffffff;
overflow: visible;
text-align: center;
display: block;
}
ul li a:hover {
background: #3366ff none repeat scroll 0% 50%;
overflow: visible;
}
li:hover ul {
display: block;
position: absolute;
overflow: visible;
}
li:hover li {
float: none;
background-color: #3366ff;
}
li:hover a {
background: #2346b1 none repeat scroll 0% 50%;
}
li:hover li a:hover {
background: #40a3f6 none repeat scroll 0% 50%;
}
#drop-nav li ul li {
border-top: 0px none;
overflow: visible;
visibility: visible;
font-family: Arial,Helvetica,sans-serif;
text-align: justify;
clear: none;
display: table-row;
width: 140px;
}
</style>

这是html：

<ul id="drop-nav">
<li><a href="#">Home</a>
</li>
<li><a href="about.html">About</a>
<ul>
  <li><a href="students.html">Students</a></li>
  <li><a href="programs.html">Programs</a></li>
  <li><a href="trainings.html">Trainings</a></li>
 </ul>
</li>
 <li><a href="services.html">Services Offered</a>
 </li>
 <li><a href="products.html">Our Products</a></li>
 <li><a href="#">Contact</a>
 </li>
</ul>

Answer 1

目前尚不清楚你所指的是什么，但文字会受到影响，因为与其他方面相比，锚链上的左边填充量太多了。

 ul li a {
     padding: 10px 18px 5px 90px; /* 90px!!! */

少尝试一下

JSfiddle Demo

Answer 2

这是因为你使用90px左边的填充。您可以将其更改为：

ul li ul li a {
    text-align: left;
    padding: 10px 18px 5px 0px;
    width: 100%;
    display: table-cell;
}

fiddle

如何排列下拉菜单？

2 个答案: