Я реализую динамическое меню. Содержимое заполняется на основе результатов запросов JSON. Меню имеет разные уровни, каждый уровень зависит от выбора, сделанного на предыдущем уровне.
Чего я хотел бы добиться, чтобы все уровни меню имели одинаковую высоту, с вертикальной полосой прокрутки для тех уровней, где содержимое переполняло бы высоту. В то же время, я хотел бы, чтобы ширина была скорректирована для содержимого (без горизонтальной полосы прокрутки). Он почти работает так, как я хочу, за исключением того, что кажется, что ширина div не регулируется по ширине полосы прокрутки, и полоса прокрутки в конечном итоге скрывает содержимое. Как на картинке ниже:
неработающее меню http://s15.postimage.org/txiietdt7/menu.jpg
Мой CSS выглядит следующим образом:
.menu {
border-style: solid;
border-width: 2px;
border-color: black;
border-radius: 3px;
background-color: rgb(200, 230, 255);
margin: 0px;
padding-bottom: 2px;
position: absolute;
overflow: auto;
overflow-x: hidden;
-ms-overflow-x: hidden;
white-space: nowrap;
}
.menuItem {
border-style: solid;
border-width: 1px;
border-color: black;
border-radius: 2px;
background-color: rgb(220, 245, 255);
margin: 2px;
margin-bottom: 0px;
padding: 2px;
text-align: center;
}
Такое поведение присутствует в Chrome и Firefox, но (возможно, не неожиданно) не в IE8.
Если бы кто-то мог указать, как достичь желаемого эффекта, я был бы очень признателен.