Проблемы с выпадающим меню

Question

Проблемы с выпадающим меню

0

Я использую упорядоченные списки для создания меню, и я столкнулся с двумя проблемами: выпадающий список не выравнивается, а эффект наведения применяется к раскрывающимся спискам, и я не хочу, чтобы это произошло

Вот сценарий JS:

http://jsfiddle.net/HFMR5/

это мой код HTML:

<div id="menu">
    <ul id="navigation">
    <li><a href="index.html">Home</a></li>
          <li><a href="">Services</a>
            <ul>
            <li><a href="">Residential</a></li>
            <li><a href="">Buisiness</a></li>
            </ul>
          </li>
          <li><a href="#">Contact</a></li>
    </ul>
    </div>

и это CSS для меню:

/*Navigation CSS*/

                #navigation 
                {
                width: 100%;
                float: left;
                margin: 0 0 3em 0;
                padding: 0;
                list-style: none;
                background-color: #f2f2f2;
                border-bottom: 1px solid #ccc; 
                border-top: 1px solid #ccc; 
                box-shadow: 0 8px 6px -6px black;
                }
                #navigation li 
                {
                float: left;
                }
                #navigation li a 
                {
                display: block;
                padding: 8px 15px;
                text-decoration: none;
                font-weight: bold;
                color: #FF6987;
                border-right: 1px solid #ccc; 
                -webkit-transition: all 0.1s ease-in;
                -moz-transition: all 0.1s ease-in;
                -o-transition: all 0.1s ease-in;
                }

                #navigation ul
                {
                font-family: Arial, Verdana;
                font-size: 14px;
                margin: 0;
                padding: 0;
                list-style: none;
                }

                #navigation ul li {
                display: block;
                position: relative;
                float: left;
                }

                #navigation li ul { display: none; }

                #navigation li:hover ul {
                display: block;
                position: absolute;
                }

                #navigation li:hover li {
                float: none;
                font-size: 11px;
                }

                #navigation li:hover a { background: #f2f2f2; }

                #navigation li a:hover 
                {
                color: #FF6987;
                background-color: #f2f2f2; 
                box-shadow: inset 0 8px 6px -6px black;
                }

user3099450 13 дек. 2013, в 18:25

Источник

Теги:

html

css

1 ответ

Ещё вопросы

Don · Accepted Answer · 2013-12-13T13-56-00.000Z

Чтобы ширина была одинаковой, вам нужно фактически установить ширину подменю (не обязательно статическое), но если вы позволите, то оно просто расширится до размера контура, который явно не нужен, изменения CSS выглядят так:

#navigation li{
    float: left;
    position:relative;
}

#navigation li:hover ul {
    display: block;
    position: absolute;
    width: 100%;
}

position: relative имеет подменю, чтобы использовать этот элемент при определении того, что ширина 100% вместо тега body.

Что касается эффекта наведения, отображаемого в подменю, все, что вам нужно сделать, более конкретно в вашем селекторе. Пространство, которое вы используете, означает, что вы выберете и потомок #navigation который является элементом li. Это включает подменю. Если вы используете селектор типа > который означает прямой ребенок, тогда вы сможете более конкретно использовать таргетинг только на пункты меню верхнего уровня. CSS выглядит примерно так:

#navigation > li > a:hover{
    color: #FF6987;
    background-color: #f2f2f2; 
    box-shadow: inset 0 8px 6px -6px black;
}

Хорошая ссылка для селекторов CSS: http://www.w3schools.com/cssref/css_selectors.asp

Таким образом, я бы использовал ту же систему, если бы я хотел просто применить CSS к дочерним элементам?
Хорошо, я бы дал класс для подменю UL и выбрал li детей этого, чтобы придать стиль