Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Неоднозначность HTML кода

Автор: Pitbul 16.2.2010, 19:09

Добрый день.

Решил модернизировать шаблон для WordPress'a с помощью горизонтальной менюшки:

Код


<ul id="mmenu">
    <li class="list"><a href="#">Здоровье</a></li>
        <ul>
            <li><a href="#">Спорт</a></li>
            <li><a href="#">Пища</a></li>
        </ul>
    <li class="list"><a href="#">Хобби</a></li>
        <ul>
            <li><a href="#">Музыка</a></li>
            <li><a href="#">Кино</a></li>
            <li><a href="#">Книги</a></li>
        </ul>
    <li class="list"><a href="#">Места</a></li>
</ul>

Вот стили к ней:

Код


    #mmenu {
        list-style: none;
    }
    #mmenu li.list { 
        width: 140px; 
        float: left;
        margin-left: -1px; 
        border: 1px black solid; 
        background-color: #999999; 
        text-align: center; }
    #mmenu li.list a { 
        display: block; 
        padding: 10px; 
    }
    #mmenu li.list ul { 
        margin-left: 0px;
        width: 100%;
        display: none; 
        border-top: 1px black solid; 
        text-align: left; 
        list-style: none;
        }
    #mmenu li.list:hover ul { 
        display: block; 
        }
    #mmenu li.list ul li a:hover { 
        background-color: #333; 
        }
    #mmenu a { 
        color: white; 
        } 
    #mmenu ul li a:hover { 
        text-decoration: none; 
        }
    #mmenu li.list { 
        background-color: #999999; 
        background-image: url(bg.gif); 
        }
    #mmenu li.list ul { 
        padding-bottom: 10px; 
        }

В целом она выглядит горизонтальной с выпадающими пунктами.

Но когда я ее пробую внедрить в шаблон показанный на сайте: http://menssource.com.ua/

То она выглядит хаотично и такое ощущение, что стили действуют только на первый уровень списка. Хотя CSS-код из исходника копирую в нужный файл.

Подскажите в чем проблема smile

Автор: smartov 16.2.2010, 23:28

Видимо в том, что там уже есть стили для .art-menu li
А вставлять я думаю ты пытаешься именно туда.

Автор: Pitbul 16.2.2010, 23:32

Но я прописал своим li стили class="list" - отличные от .art-menu
Или это не смогло перекрыть действие .art-menu?
smile

Автор: smartov 17.2.2010, 01:19

Pitbul, то есть ты заменил ul с классом art-menu на свой, верно? Тогда все должно быть нормально.
Открой Firebug да посмотри, какие стили реально пирменились. Кто кого перекрыл. Там всё наглядно

http://grab.by/2t5v