3

很难解释，所以我创建了一个代码笔供您查看。当您将鼠标悬停在导航项上时，会出现下拉菜单。您会看到有些项目没有正确排列。即某些项目的宽度大于它们的兄弟项目。我只是希望它们都伸展到最宽列表项的宽度。（困惑了吗？）看看代码笔..

在此处输入图像描述

4

6 回答 6

3

您需要对以下 CSS 进行更改以使它们对齐。

例如。

#main-navigation ul li ul li {
    background: none repeat scroll 0 0 #DE5D48;
    width: 140px;
    text-align:left;
}

工作演示

希望这可以帮助。

于 2013-10-21T09:33:40.167 回答
2

您应该使用display : inline-block而不是float: left在/* list item */css 中，并且应该添加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;

     }


  }

}
于 2013-10-21T09:49:20.753 回答
1

我建议将背景、大小和位置从li移到ul，这样如果一个项目太大，整个列表就会扩大。

于 2013-10-21T09:34:03.197 回答
1

尝试给予更多min-width

#main-navigation ul li {
float: left;
position: relative;
background: #D7351B;
min-width: 140px;
于 2013-10-21T09:35:49.393 回答
0

在 CSS 中，li元素具有：min-width: 105px;

将其更改为155px，它将解决它。

希望有帮助。

于 2013-10-21T09:30:15.897 回答
0

很简单，

你不能使用：top: 100%

您将希望将其更新为top: 0使其与父对象的顶部对齐。

您可能需要top: 11px在您的确切情况下。

于 2013-10-21T09:31:06.517 回答