html 下拉列表对齐,HTML下拉元素宽度不能与兄弟对齐

你应该/* list item */ CSS使用display : inline-block代替float: left，应添加display : table-row;到/* sub list item */。

@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;

}

}

}