Исчезновение подменю

@JohnAlterat · Регистрация: 23.12.2013

Author24 — интернет-сервис помощи студентам

Доброго времени суток. Данный вопрос уже подымал в существующей теме, но решение так и не было найдено, по этому обращаюсь снова к вам, комрады форумчане, за помощью.

Стандарное горизонтальное меню (еще кривоват в их создании но исправляюсь)
Добавил цвет фона, дабы было видно само меню из-за отсутсвия картинки

HTML5

<ul class="menu">
                <li><a href="#">Главная</a></li>
                <li><a href="#">О нас</a>
                    <ul>
                        <li><a href="#">Название подраздела</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>
                <li><a href="#">Необычное</a></li>
                <li><a href="#">Странное</a></li>
            </ul>

CSS

.menu{
    list-style-type: none;
    background: url(../images/nav.png);
    height: 49px;
    position: relative;
    top:-200px;
    background-color: #b7b7b7;
}
 
 ul.menu li{
    display: block;
    float: left;
    padding-left: 22px;
    padding-top: 17px;
    position: relative;
 
 
}
 
 ul.menu li ul{
     display: none;
     float: left;
     position: absolute;
 }
 
 
 ul.menu li:hover ul {
     display: block;
     background: url(../images/dropdown.png);
     width: 990px;
     top:43px;
     left: -68px;
     background-color: #b7b7b4;
 }
 
 ul li a{
     text-decoration: none;
     text-align: center;
     position: relative;
     color: #000000;
     font-family: Arial, bold;
     font-size: 9pt;
 
 }

При наведении должно появляться подменю, в котором так же можно выбирать необходимые под категории. Собственно это сделал, вроде как. Но есть главный нюанс. Меню и подменю должны проходить ровно по стыку изображений у них в стилях, не выше, не ниже. Попробовал через margin-top (без position) и с оным - одно и тоже. Довожу значение до определенного показателя и подменю исчезает как только убирается мышка с родительского пункта. Подскажите пожалуйста, может сделал что не так? Как можно выполнить сию задумку?

@Crystal-3 · 15.09.2014, 16:16

JohnAlterat, здравствуйте) Помню я вашу тему, попробую помочь.
Для того, чтобы выровнять надписи по вертикали допишите:

CSS

1
2
3

.menu {
      line-height:49рх;
}

Дальше, чтобы кликабельной была вся область кнопки, а не только надпись, добавляете:

CSS

1
2
3

ul li a {
    display:block;
}

Ну и уберите этот padding, от уже не нужен:

CSS

1
2
3

ul.menu li {
    padding-top:17px;
}

@zackuz · 15.09.2014, 16:27

Попробуй это:

HTML5

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<style> 
ul{
    list-Style:none;
    margin:0;
    padding:0;
    margin:auto;
    background:#f0f0f0;
}
.menu li{
    float:left;
    position:relative;
}
.menu li a{
    display:inline-block;
    height:50px;
    line-height:50px;
    padding:0 20px;
    background:#69c;
    color:#fff;
    text-transform:uppercase;
    text-decoration:none;
}
.menu li a:hover{
    background:#369;
}
.menu li ul{
    display:none;
    position:absolute;
    left:0; 
}
.menu li:hover ul{
    display:block;
}
.menu li li{
    float:none;
}
.menu li li a{
    display:block;
    background:#f60;
    white-space:nowrap;
}
.menu li li a:hover{
    background:#d30;
}
</style>
</head>
 
<body>
 
<ul class="menu">
                <li><a href="#">Главная</a></li>
                <li><a href="#">О нас</a>
                    <ul>
                        <li><a href="#">Название подраздела</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>
                <li><a href="#">Необычное</a></li>
                <li><a href="#">Странное</a></li>
            </ul>
 
</body>
</html>

@JohnAlterat · 15.09.2014, 20:00 **[ТС]**

Crystal-3, zackuz, спасибо, помогло. Последний вопрос, может глупый, но всё же: зачем ставить значение block для "а", если же оно присутствует в родительских элементах и по идее должно их наследовать?

@Lena-T-1981 · 15.09.2014, 20:16

zackuz, Crystal-3, Спасибо

@zackuz · 15.09.2014, 20:22

У всех селекторов есть приоритет вызовов. А самый первый css заложен браузером, так что display:block родителя может не отменить, значение по умолчанию.

@JohnAlterat · 15.09.2014, 21:09 **[ТС]**

zackuz, понял спасибо.

Исчезновение подменю

Решение

Решение

@JohnAlterat 6 / 0 / 1 Регистрация: 23.12.2013 Сообщений: 85
	15.09.2014, 20:00 [ТС]	4
	Crystal-3, zackuz, спасибо, помогло. Последний вопрос, может глупый, но всё же: зачем ставить значение block для "а", если же оно присутствует в родительских элементах и по идее должно их наследовать? 0

@Lena-T-1981 5 / 5 / 0 Регистрация: 12.09.2014 Сообщений: 22
	15.09.2014, 20:16	5
	zackuz, Crystal-3, Спасибо 0

@zackuz 18 / 18 / 5 Регистрация: 03.09.2014 Сообщений: 66
	15.09.2014, 20:22	6
	У всех селекторов есть приоритет вызовов. А самый первый css заложен браузером, так что display:block родителя может не отменить, значение по умолчанию. 0

@JohnAlterat 6 / 0 / 1 Регистрация: 23.12.2013 Сообщений: 85
	15.09.2014, 21:09 [ТС]	7
	zackuz, понял спасибо. 0