Гибкая ширина горизонтального подменю

У меня есть горизонтальная навигация, от которой я хочу отделить горизонтальную вспомогательную навигацию. Проблема в том, что у меня встроенный дисплей вспомогательной навигации, хотя он имеет абсолютную позицию. Я знаю, что есть проблемы с использованием встроенного дисплея, когда у вас есть абсолютная позиция. Он работает так, как я хочу, с фиксированным дисплеем, но я не хочу, чтобы он был фиксированным ... Кто-нибудь знает альтернативу этому? Кроме того, я не могу просто установить ширину для вспомогательной навигации, потому что каждое из подменю будет иметь разную ширину.

<style>
     ul li {
        float: left;
        position: relative;
    }

    #primary-nav ul li ul {
        position: relative;
        top: 42px;
        display: none;
        width:100%;

    }
    #primary-nav ul li ul li {
        list-style:none outside none;
        margin-left:20px;
        float:left;
        z-index: 1000;
    }
    #primary-nav ul li:hover ul {
        display:inline;
        position:absolute;
    }
</style>


<ul class="menu">
    <li>menu Item</li>
    <li>drop down</li>
        <ul class="submenu">
            <li>dropdown Item</li>
            <li>dropdown Item</li>
        </ul>
 </ul>

person codeprokanner    schedule 02.07.2012    source источник


Ответы (1)


Вот tinkerbin с решением -> http://tinkerbin.com/NlqcJcL7

Применяя white-space: nowrap к абсолютно позиционированному .submenu, вы гарантируете, что его дочерние встроенные блоки не свернутся на следующую строку.

person João Paulo Macedo    schedule 02.07.2012
comment
Теоретически имеет смысл, но у меня почему-то не заработало. может посмотреть на вопрос вживую? test.kyrusmobile.com - person codeprokanner; 03.07.2012
comment
Проблема в том, что вы перемещаете элементы .menu в .submenu. Когда вы это делаете, они рассматриваются как элементы блочного уровня, поэтому white-space: nowrap не может делать то, что должен делать. Исправить легко, очевидно. Удалите стиль float (если вы не можете, переопределите его с помощью float: none). Потом так же убрать width:100% на родительском ul.submenu - нужно чтобы было авто. Вот и все! - person João Paulo Macedo; 03.07.2012
comment
Я думаю, вам на самом деле не нужно удалять поплавок из .menu-items. Единственное, что мешало макету, — это установленная ширина в .submenu. Но опять же, поплавок вам даром не нужен, так что лучше его убрать. - person João Paulo Macedo; 03.07.2012