你应该使用display：inline-block而不是float：left in / * list item * / css,并且应该添加display：table-row;进入/ *子列表项目* /.
@dark-blue: #31394C;
@light-gray: #E6E6E6;
@gray: #B1B2B5;
@dark-gray: #6D6D6D;
@dark-red: #d7351b;
@red: #ee2a2e;
@light-red: #f75d1f;
@dusty-red: #DE6450;
@light-dusty-red: #fdc29e;
@dark-dusty-red: #b50b03;
@sub-nav-red: #DE5D48;
@white: #ffffff;
@import url(http://fonts.googleapis.com/css?family=Rosario);
body {
background: @dark-blue;
}
#main-navigation {
/* initial list */
ul {
list-style: none;
/* list item */
li {
display: inline-block;
position: relative;
background: @dark-red;
min-width: 105px;
height: 21px;
text-align: center;
margin-right: 10px;
/* link */
a {
color: @white;
display: block;
line-height: 21px;
text-decoration: none;
font-family: 'Rosario', sans-serif;
font-size: 12px;
text-transform: uppercase;
}
a:hover {
color: @white;
background: @dark-red;
}
/* sub list */
ul {
position: absolute;
top: 100%;
left: -40px;
display: none;
border-top: 10px solid rgba(255, 255, 255, 0.0);
z-index: 99;
/* sub list item */
li {
background: @sub-nav-red;
display : table-row;
/* sub list link */
a {
padding: 0 5px 0 5px;
white-space: nowrap;
}
}
}
ul:hover {
display: block;
}
}
li:hover > ul {
display: block;
}
}
}
