Предотвращение блокировки элемента из-за переполнения родительского элемента.

Question

У меня есть меню (jsfiddle), которое отображается, как показано ниже, оно построено из <ul> и <li> элементов.

Элементы меню ребенка появляются ниже родительского элемента, а контейнер является фиксированной ширины <ul>. У меня есть проблема в том, что для элемента меню далее вправо, это второй уровень <ul> перетекает ширину родительского элемента, например, так:

Как я могу убедиться, что подменю показывает, как в первом изображении, но для элементов меню далее справа только перемещается не дальше, чем на правую границу, сохраняя размер неповрежденным, а не переполняя?

Answer 1

Вы можете добавить родительский DIV, чтобы все ваши элементы с overflow: hidden;.

Как this

Answer 2

Добавьте следующие строки в контейнере:

overflow-x: hidden; 

Кроме того, необходимо добавить высоту к нему, что будет так, что он будет отображать подменю.

двигаться дальше влево определенный суб-меню, вы должны добавить класс к их <ul> элементу, а затем добавить CSS, чтобы нацелить их и переместить их в крайнем левом положении, как вы хотите:

Ex: если вы добавляете класс push_left к элементу подменю <ul>, вы можете настроить таргетинг его следующим образом:

#navigation>ul li .push_left { 

    position: absolute; 
    top: 42px; 
    left: 0px; /* set this value to however far left you want the sub-menu */ 

} 

Answer 3

добавить в свой контейнер перелива-х (вы хотите сохранить у, возможно ...) скрытый ..

#navigation{ 
    width:900px; 
    margin:0px 0 13px; 
    padding:0px; 
    float:left; 
    background:#3b6daa; 
    overflow-x:hidden; <------------------------------- note the X.. 
} 

или просто убедитесь, что ваше меню не фиксированной ширины:

#navigation>ul li ul { 
    float: left; 
    padding: 8px 0; 
    position: absolute; 
    left:auto; 
    top:42px; 
    display: none; 
    width:auto; <------------------- will make it adjust to the contain and the content 
    background: #81abdd; 
    color: #1c508e; 
    list-style: none; 
} 

или если вы хотите, чтобы привести его в разные (например, подсказка, которая совпадет справа или слева от parent..then я предлагаю вам идти вниз по яваскрипту пути ..)

Вот некоторые примеры:

примеры выравнивания jquery vertical align 2 divs

JQuery позиция (также проверить ширину и т.д.) http://api.jquery.com/position/

большая подсказка, которая выравнивает все вокруг http://craigsworks.com/projects/qtip/

Нет из примера коробки, но это должно дать вам правильный direciton я считаю ..