Сегодня долго просидел и не как не понял как это сделать, а именно вывести блок и что бы он остался активным пока курсор находиться на выведенном блоке. Получилось только вывести блок и то средствами CSS.
Вот мои коды, мб кто то сможет мне помочь?
Нужно что бы при наведении на блок с классом buttonmenu вылезал блок с классом drop_menu, и он был со свойством visibility: visible до тех пор, пока курсор не выйдет за границы блока drop_menu
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Template HTML/CSS</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div id="Head">
<div id="Logo">
</div>
<div id="Menu">
<div class="buttonmenu">
<a href=""> <span> О нас </span> </a>
</div>
<div class="drop_menu">
<div class="title">
<h2> О НАС </h2>
<ul>
<li class="sub"><a href="">О нас</a></li>
<li class="sub"><a href="">О нас</a></li>
<li class="sub"><a href="">О нас</a></li>
<li class="sub"><a href="">О нас</a></li>
<li class="sub"><a href="">О нас</a></li>
<li class="sub"><a href="">О нас</a></li>
<li class="sub"><a href="">О нас</a></li>
<li class="sub"><a href="">О нас</a></li>
<li class="sub"><a href="">О нас</a></li>
<li class="sub"><a href="">О нас</a></li>
</ul>
</div>
<div class="drop_section">
</div>
<div class="description">
</div>
</div>
<div class="buttonmenu">
<a href=""> <span> Новости </span> </a>
</div>
<div class="buttonmenu">
<a href=""> <span> Услуги </span> </a>
</div>
<div class="drop_menu">
<div class="title">
<h2> УСЛУГИ </h2>
<ul>
<li class="sub"><a href="">Услуги</a></li>
<li class="sub"><a href="">Услуги</a></li>
<li class="sub"><a href="">Услуги</a></li>
<li class="sub"><a href="">Услуги</a></li>
<li class="sub"><a href="">Услуги</a></li>
<li class="sub"><a href="">Услуги</a></li>
<li class="sub"><a href="">Услуги</a></li>
<li class="sub"><a href="">Услуги</a></li>
<li class="sub"><a href="">Услуги</a></li>
<li class="sub"><a href="">Услуги</a></li>
</ul>
</div>
<div class="drop_section">
</div>
<div class="description">
</div>
</div>
<div class="buttonmenu">
<a href=""> <span> Разработки </span> </a>
</div>
<div class="drop_menu">
<div class="title">
<h2> РАЗРАБОТКИ </h2>
<ul>
<li class="sub"><a href="">Разработки</a></li>
<li class="sub"><a href="">Разработки</a></li>
<li class="sub"><a href="">Разработки</a></li>
<li class="sub"><a href="">Разработки</a></li>
<li class="sub"><a href="">Разработки</a></li>
<li class="sub"><a href="">Разработки</a></li>
<li class="sub"><a href="">Разработки</a></li>
<li class="sub"><a href="">Разработки</a></li>
<li class="sub"><a href="">Разработки</a></li>
<li class="sub"><a href="">Разработки</a></li>
</ul>
</div>
<div class="drop_section">
</div>
<div class="description">
</div>
</div>
<div class="buttonmenu">
<a href=""> <span> Документы </span> </a>
</div>
<div class="buttonmenu">
<a href=""> <span> РНС </span> </a>
</div>
<div class="drop_menu">
<div class="title">
<h2> РНС </h2>
<ul>
<li class="sub"><a href="">РНС</a></li>
<li class="sub"><a href="">РНС</a></li>
<li class="sub"><a href="">РНС</a></li>
<li class="sub"><a href="">РНС</a></li>
<li class="sub"><a href="">РНС</a></li>
<li class="sub"><a href="">РНС</a></li>
<li class="sub"><a href="">РНС</a></li>
<li class="sub"><a href="">РНС</a></li>
<li class="sub"><a href="">РНС</a></li>
<li class="sub"><a href="">РНС</a></li>
</ul>
</div>
<div class="drop_section">
</div>
<div class="description">
</div>
</div>
<div class="buttonmenu">
<a href=""> <span> Обратная связь </span> </a>
</div>
<div class="buttonmenu">
<a href=""> <span> Контакты </span> </a>
</div>
<div class="buttonmenu">
<a href=""> <span> Полезные ссылки </span> </a>
</div>
<div class="buttonmenu">
<a href=""> <span> Карта сайта </span> </a>
</div>
<div class="clearfix"></div>
</div>
</div>
<div id="Page">
<div id="Content">
</div>
<div id="Bannerbar">
</div>
</div>
<div id="Footer">
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
article, aside, footer, header, hgroup, nav, section {
display: block;
}
ul, ol, li, a {
text-decoration: none;
list-style: none;
}
body {
width: 1280px;
margin: 0 auto;
font: 100%/1.5em Arial, Helvetica, sans-serif; }
#Head {
width: 100%;
background-color: #ffffff;
}
#Logo {
}
#Menu {
width: 100%;
height: 50px;
background-color: #1b1b1b;
margin: 0 auto;
}
.buttonmenu {
width: 10%;
height: 50px;
float: left;
text-align: center;
line-height: 50px;
font-size: 14px;
color: #ffffff;
background-color: #1b1b1b;
border-right: 1px solid #c2c2c2;
}
.buttonmenu:last-child {
border-right: none;
}
.buttonmenu span {
white-space: pre-wrap;
}
.buttonmenu a {
display: block;
color: #ffffff;
}
.buttonmenu a:hover {
display: block;
background-color: #c2c2c2;
color: #ffffff;
cursor: pointer;
}
.clearfix {
clear: both; //Очищает поток данных
}
.drop_menu {
position: absolute;
width: 1280px;
float: left;
top:50px;
visibility: hidden;
background-color: #c2c2c2;
line-height: normal;
font-size: 14px;
color: #ffffff;
}
.title {
float: left;
width: 310px;
padding: 30px 0 0 20px;
text-align: center;
}
.title h2 {
padding: 10px 0;
}
.drop_section {
float: left;
width: 540px;
padding: 30px 0;
}
.description {
float: left;
width: 350px;
padding: 30px 20px 0 0;
}
.buttonmenu:hover + .drop_menu{
visibility: visible;
}
#Page {
}
#Content {
float: left;
overflow: hidden;
}
#Bannerbar {
float: left;
overflow: hidden;
}
#Footer {
overflow: hidden;
}
