CSS: Почему это ломается, когда я беру Overflow: скрытый?

Question

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

Но когда я вынимаю это, это ломает это? Что еще я могу использовать, кроме переполнения: скрытый, чтобы он выглядел правильно и не скрывал мою навигацию?

http://jsfiddle.net/xtian/svr8C/1/

Answer 1

Его причина, скрывающая оверлов, очищает все поплавки и дает элементу высоту плавающего ли. Решение таково: http://jsfiddle.net/svr8C/11/

Это утверждение:

.nav:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;font-size:xx-large;content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";}

добавляет невидимый элемент после списка и очищает их. Его взяли из известного элемента oocss media: https://github.com/stubbornella/oocss/blob/master/core/media/media.css

Answer 2

Просто установите высоту (35px?) .nav и удалите overflow: hidden;

Answer 3

Вы можете использовать что-то в этом роде.

HTML:

<ul class="menu">
    <li><a href="#">Testing</a></li>
    <li><a href="#">Testing</a>
        <ul class="submenu">
            <li><a href="#">Testing</a></li>
            <li><a href="#">Testing</a></li>
            <li><a href="#">Testing</a></li>
            <li><a href="#">Testing</a></li>
        </ul>
    </li>
    <li><a href="#">Testing</a></li>
    <li><a href="#">Testing</a></li>
</ul>

CSS:

.menu li {
    display: inline-block;
}

.menu li a {
    color: #fff;
    background: orangered;
    text-decoration: none;
    padding: 0.5em;
    border-bottom: 5px solid #000;
}

.menu li .submenu {
    display: none;
}

.menu li:hover > .submenu {
    display: block;
    position: absolute;
    top: 30px;
}

.menu li .submenu li {
    display: block;
    margin-top: 20px;
}

Вот демо 1014 *

Answer 4

Попробуйте переполнение: авто;- это очистит поплавок аналогично переполнению: скрытый;но может вместо этого ввести полосы прокрутки, если вы не будете осторожны.В качестве альтернативы вы можете попробовать подход "float all": плавающий элемент внутри другого плавающего элемента также вызывает очистку float