Submenu положение относительно MainMenu

Question

Я это меню, который активен на первом пункта главного меню (вверху):

У меня есть проблема в том, что, когда пользователь нажимает на средний, пункт четвертого или последнего главного меню, то подменю теперь выглядит следующим образом (получение из всего):

Кроме того, главное меню вырастет клиентом, так что будет шестым, седьмым и т.д. ... так я не могу просто управлять с классом элементами, которые сейчас ...

Любые идеи о том, как добраться до css/jquery Решение по этому вопросу? пытаясь выполнить первое изображение, основанное на дизайне.

Это моя разметка:

   <ul id="mainmenu" class="clearfix"> 
        <li class="active"> 
         <a class="arrowdown" href="javascript:void(0)">ANSIEDAD</a> 
         <ul class="sublist"> 
          <li> 
           <a href="javascript:void(0)">Política</a> 
          </li> 
          <li> 
           <a href="javascript:void(0)">Economía</a> 
          </li> 
          <li> 
           <a href="javascript:void(0)">Sociedad</a> 
          </li> 
          <li class="active"> 
           <a href="javascript:void(0)">Medios</a> 
          </li> 
          <li> 
           <a href="javascript:void(0)">Inmobiliario</a> 
          </li> 
         </ul> 
        </li> 
        <li> 
         <a href="javascript:void(0)">PRETENSIÓN</a> 
        </li> 
        <li> 
         <a href="javascript:void(0)">HEDONISMO</a> 
        </li> 
        <li> 
         <a href="javascript:void(0)">MATERIALISMO</a> 
        </li> 
        <li> 
         <a href="javascript:void(0)">ARROGANCIA</a> 
        </li> 
        <li id="menu_search"> 
         <a href="javascript:void(0)"></a> 
        </li> 
       </ul> 

и CSS:

ul#mainmenu{ 
    font-family: Georgia, Times, "Times New Roman", serif; 
    width: 754px; 
    margin: 0 auto; 
    li{ 
     float: left; 
     list-style: none; 
     background: #999999; 
     margin-right: 4px; 
     .round_corners(); 
     width: 140px; 
     text-align: center; 
     padding: 3px 0px; 
     position: relative; 
     a{ 
      text-decoration: none; 
      color: #ffffff; 
      text-transform: uppercase; 
      font-size: 14px; 
      &.arrowdown{ 
       padding-bottom: 10px; 
       background: url('../img/sprites.png') no-repeat center -169px; 
      } 
     } 
     &#menu_search{ 
      background: url('../img/sprites.png') #000 2px 2px; 
      width: 34px; 
      height: 28px; 
      padding: 0; 
      margin-right: 0; 
      a{ 
       display: inline-block; 
       width: 100%; 
       height: 100%; 
      } 
     } 
     &.active{ 
      background: #000000; 
     } 
     &:hover{ 
      background: #000000; 
      color: #ffffff; 
     } 
     ul.sublist{ 
      position: absolute; 
      width: 560px; 
      top: 39px; 
      left: 40px; 
      li{ 
       float: left; 
       margin-right: 5px; 
       margin-bottom: 5px; 
       width: auto; 
       padding: 1px 9px; 
       background: #666666; 
       a{ 
        text-transform: none; 
       } 
       &.active{ 
        background: #000000; 
       } 
       &:hover{ 
        background: #000000; 
        color: #ffffff; 
       } 
      } 
     } 
    } 
} 

Answer 1

Попробуйте дать в главном меню максимальную ширину. В этом случае я предполагаю, что вы хотите, чтобы его максимальная ширина составляла 100%.

#mainmenu { 
    max-width: 100%; 
} 

Это не позволит главному меню превышать ширину страницы. Однако вы можете столкнуться с новыми проблемами.

Answer 2

Использование max-width поможет решить вашу проблему. Here - пример того, как вы можете использовать max-width для проверки подменю.

Вместо того, чтобы разбивать подменю на две строки, возможно, вы попытаетесь сместить опорную точку подменю в более централизованное местоположение. Только мои 2 цента.