Меню с выпадающим DIV при наведении мыши

@sweelemk · Регистрация: 16.09.2013

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

Здравствуйте, ребята! Помогите понять как правильно сделать. Есть пункты меню. Одни пункт имеет возможность при наведении показывать div. Но! открываться div должен про НАВЕДЕНИИ. т.е. когда ведем по пунктам меню, наводим на определенный пункт и открывается внизу div. Див должен закрываться при переходе на другой пункт меню или пи выходе курсора за область div. Как это реализовать? Помогите, пожалуйста!
Вот структура:

HTML5

<div class="header-nav">
    <div class="center-cell">
        <nav class="nav">
            <ul>
                <li><a href="/">Меню 1</a></li>
                <li><a class="sub" href="/">Меню 2</a></li>
                <li><a href="/">Меню 3</a></li>
                <li><a href="/">Меню 4</a></li>
                <li><a href="/">Меню 5</a></li>
                <li><a href="/">Меню 6</a></li>
                <li><a href="/">Меню 7</a></li>
                <li><a href="/">Меню 8</a></li>
                <li><a href="/">Меню 9</a></li>
            </ul>
        </nav>
        <div class="container-box">
            <p>Здесь большое количество элементов</p>
        </div>
    </div>
</div>

CSS

.header-nav {
    max-width: 1158px;
}
.center-cel {
    position: relative;
}
.nav ul {
    display: table;
    width: 100%;
}
.nav li {
    display: table-cell;
}
.container-box {
    position: absolute;
    border: 1px solid #000;
    width: 100px;
    height: 100px;
    top: 40px;
    left: 0;
}

также прилагаю ссылку на jsfiddle: http://jsfiddle.net/6una1fbL/

@Lazy_Den · 08.05.2015, 20:09

Сообщение от sweelemk

Див должен закрываться при переходе на другой пункт меню или пи выходе курсора за область div.

Для того, чтоб курсор ушёл за область div, он должен туда как-то попасть, а в вашем примере этого добиться нельзя.

Добавлено через 1 минуту
Что у вас в том div-е должно быть? Подменю?

@sweelemk · 08.05.2015, 21:48 **[ТС]**

Lazy_Den, там будет находится 2 списка с наименование стран + 2 заголовка

@Armi · 09.05.2015, 19:05

Что то типа этого.
http://jsfiddle.net/6una1fbL/24/

@sweelemk · 09.05.2015, 19:08 **[ТС]**

Armi, да, именно так!) Спасибо большое!

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	08.05.2015, 20:09	2
	Сообщение от sweelemk Див должен закрываться при переходе на другой пункт меню или пи выходе курсора за область div. Для того, чтоб курсор ушёл за область div, он должен туда как-то попасть, а в вашем примере этого добиться нельзя. Добавлено через 1 минуту Что у вас в том div-е должно быть? Подменю? 0

@sweelemk 0 / 0 / 1 Регистрация: 16.09.2013 Сообщений: 127
	08.05.2015, 21:48 [ТС]	3
	Lazy_Den, там будет находится 2 списка с наименование стран + 2 заголовка 0

@Armi 312 / 106 / 69 Регистрация: 18.04.2015 Сообщений: 346
	09.05.2015, 19:05	4
	Что то типа этого. http://jsfiddle.net/6una1fbL/24/ 0

@sweelemk 0 / 0 / 1 Регистрация: 16.09.2013 Сообщений: 127
	09.05.2015, 19:08 [ТС]	5
	Armi, да, именно так!) Спасибо большое! 0