Меню исчезает, когда окно не на полном экране

Рейтинг: 0Ответов: 1Опубликовано: 29.12.2014

Вот как выглядит при полном открытии окна:

alt text

А вот так выглядит при обычном:

alt text

Когда окно не на полном экране, меню исчезает и остается категория "Главная".
Помогите, пожалуйста.

html:

<div id="home" class="header">
    <!-- Меню-->
    <div class="top-header">
        <div class="logo">
            <a href="#"><img src="images/логотип.png" alt="">
            </a>
        </div>
        <nav class="top-nav">
            <ul class="top-nav">
                <li class="active"><a href="#home" class="scroll">Главная </a>
                </li>
                <li><a href="#about" class="scroll">О нас</a>
                </li>
                <li><a href="#screenhot" class="scroll">Фотографии</a>
                </li>
                <li><a href="#demo" class="scroll">ХЗ</a>
                </li>
                <li><a href="#download" class="scroll">Тоже хз</a>
                </li>
                <li><a href="#contact" class="scroll">Контакт</a>
                </li>
            </ul>
        </nav>
        <div class="clearfix"> </div>
    </div>
</div>
css html
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Увидел класс "clearfix" и сразу комментарий: если в вашей верстке не является обязательной поддержка IE7, то можно обойтись без float в li.

Такого рода меню делается так:

<code>
.top-nav {list-style:none;}
.top-nav a {color:white;text-decoration:none;text-transform:uppercase;}
.top-nav li {display:inline-block;}
.top-nav a:hover,.top-nav li.active a {color:#277a68;}
</code>