HTML drop down element width not aligning to siblings

Question

Quite difficult to explain, so I created a codepen for you to have a look at. When you hover over a navigation item and the dropdown menu appears. You'll see that some of the items don't line up correctly. I.e. the width of some items are bigger than their sibling items. I just want them all to stretch to the width of the widest list item. (confused yet?) Just have a look at the code pen..

Answer 1

You need to make changes to the below CSS to get them aligned.

For Instance.

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

WORKING DEMO

Hope this helps.

Answer 2

You should use display : inline-block instead of float: left in /* list item */ css and should add display : table-row; into /* 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;

     }


  }

}