Проблема Код работает немного неправильно

Тема в разделе 'CSS', создана пользователем mak326428, 23 фев 2012.

  1. mak326428 Новичок

    Вот собственно код (CSS3)
    Код:
    #menu, #menu ul
    {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #menu
    {
        background-color: #111;
        background-image: linear-gradient(#444, #111);
        background-image: -moz-linear-gradient(#444, #111);
        background-image: -ms-linear-gradient(#444, #111);
        background-image: -o-linear-gradient(#444, #111);
        background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
        background-image: -webkit-linear-gradient(#444, #111);
        border: 1px solid #222;
        border-radius: 6px;
        box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
        margin: 60px auto;
        moz-border-radius: 6px;
        moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
        webkit-border-radius: 6px;
        webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
        width: 960px;
    }
    #menu:before,
        #menu:after
    {
        content: "";
        display: table;
    }
    #menu:after
    {
        clear: both;
    }
    #menu
    {
        zoom: 1;
    }
    #menu li
    {
        border-right: 1px solid #222;
        box-shadow: 1px 0 0 #444;
        float: left;
        moz-box-shadow: 1px 0 0 #444;
        position: relative;
        webkit-box-shadow: 1px 0 0 #444;
    }
    #menu a
    {
        color: #999;
        float: left;
        font: bold 12px Arial, Helvetica;
        padding: 12px 30px;
        text-decoration: none;
        text-shadow: 0 1px 0 #000;
        text-transform: uppercase;
    }
    #menu li:hover > a
    {
        color: #fafafa;
    }
    *html #menu li a:hover
    {
        color: #fafafa;
    }
    #menu ul
    {
        _margin: 0;
        background: #444;
        background: linear-gradient(#444, #111);
        background: -moz-linear-gradient(#444, #111);
        background: -ms-linear-gradient(#444, #111);
        background: -o-linear-gradient(#444, #111);
        background: -webkit-linear-gradient(#444, #111);
        background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
        border-radius: 3px;
        box-shadow: 0 -1px 0 rgba(255,255,255,.3);
        left: 0;
        margin: 20px 0 0 0;
        moz-border-radius: 3px;
        moz-box-shadow: 0 -1px rgba(255,255,255,.3);
        moz-transition: all .2s ease-in-out;
        ms-transition: all .2s ease-in-out;
        opacity: 0;
        o-transition: all .2s ease-in-out;
        position: absolute;
        top: 38px;
        transition: all .2s ease-in-out;
        visibility: hidden;
        webkit-border-radius: 3px;
        webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
        webkit-transition: all .2s ease-in-out;
        z-index: 9999;
    }
    #menu li:hover > ul
    {
        margin: 0;
        opacity: 1;
        visibility: visible;
    }
    #menu ul ul
    {
        _margin: 0;
        box-shadow: -1px 0 0 rgba(255,255,255,.3);
        left: 150px;
        margin: 0 0 0 20px;
        moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
        top: 0;
        webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
    }
    #menu ul li
    {
        _line-height: 0;
        border: 0;
        box-shadow: 0 1px 0 #111, 0 2px 0 #666;
        display: block;
        float: none;
        moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
        webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
    }
    #menu ul li:last-child
    {
        box-shadow: none;
        moz-box-shadow: none;
        webkit-box-shadow: none;
    }
    #menu ul a
    {
        _height: 10px;
        display: block;
        float: none;
        padding: 10px;
        text-transform: none;
        white-space: nowrap;
        width: 130px;
    }
    #menu ul a:hover
    {
        background-color: #0186ba;
        background-image: linear-gradient(#04acec, #0186ba);
        background-image: -moz-linear-gradient(#04acec, #0186ba);
        background-image: -ms-linear-gradient(#04acec, #0186ba);
        background-image: -o-linear-gradient(#04acec, #0186ba);
        background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
        background-image: -webkit-linear-gradient(#04acec, #0186ba);
    }
    #menu ul li:first-child > a
    {
        border-radius: 3px 3px 0 0;
        moz-border-radius: 3px 3px 0 0;
        webkit-border-radius: 3px 3px 0 0;
    }
    #menu ul li:first-child > a:after
    {
        border-bottom: 6px solid #444;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        content: '';
        left: 40px;
        position: absolute;
        top: -6px;
    }
    #menu ul ul li:first-child a:after
    {
        border-bottom: 6px solid transparent;
        border-left: 0;
        border-right: 6px solid #3b3b3b;
        border-top: 6px solid transparent;
        left: -6px;
        margin-top: -6px;
        top: 50%;
    }
    #menu ul li:first-child a:hover:after
    {
        border-bottom-color: #04acec;
    }
    #menu ul ul li:first-child a:hover:after
    {
        border-bottom-color: transparent;
        border-right-color: #0299d3;
    }
    #menu ul li:last-child > a
    {
        border-radius: 0 0 3px 3px;
        moz-border-radius: 0 0 3px 3px;
        webkit-border-radius: 0 0 3px 3px;
    }
    По идее должен быть анимированным и выпадающим. Но что то не так...
  2. XmP ADD ebx, 110h

    Ну это так просто не сказать, нужен пример HTML. Тестировалось в разных браузерах?
  3. mak326428 Новичок

    Собственно, HTML (без подключения вышеизложенного CSS-кода):
    HTML:
    <ul id="menu">
        <li><a href="/">Главная</a></li>
     
        <li>
            <a href="">Категории</a>
            <ul>
                <li><a href="">CSS</a></li>
                <li><a href="">Графический дизайн</a></li>
                <li><a href="">Инструментарий</a></li>
                <li><a href="">Веб дизайн</a></li>
            </ul>
        </li>
        <li><a href="">Проекты</a></li>
        <li><a href="">О нас</a></li>
        <li><a href="">Контакты</a></li>
    </ul>
  4. bespontoff Новичок

    никогда на "костылях" нормально ничего не работало :confused:
    и вообще... "костыли" - зло!:cold:

Поделиться этой страницей