| |
|
|
| | Здравствуйте! у меня меню из картинок и ссылок.
При наведении курсором на ссылку, выпадает подменю. Как сделать, чтоб при наведении на картинку выпадало ЭТО ЖЕ подменю?
это можно сделать только с помощью JS?
как мне правильно прописать функцию к данному коду?
код HTML:
<table class="menu_table">
<tr class="menu_table_tr_1">
<td class="yacheyka"><a href="/" class="r1"></a></td>
<td class="yacheyka"><a href="/" class="r2"></a></td>
<td class="yacheyka"><a href="/" class="r3"></a></td>
</tr>
</table>
<ul class="menu">
<li class="menu_1">
<a href="/about">О КОМПАНИИ</a>
<ul>
<li>
<a href="/">О НАС</a><br>
</li>
<li>
<a href="#">ВАКАНСИИ</a><br>
</li>
<li>
<a href="/" class="brd">ИСТОРИЯ</a>
</li>
</ul>
</li>
</ul>
|
код CSS:
a.r1 {
background: url(/elements/img/3.jpg) no-repeat;
display: block;
width: 150px;
height: 85px;
margin-left: 39px;
}
a.r1:hover {
background: url(/elements/img/2.jpg) no-repeat;
}
a.r2 {
background: url(/elements/img/5.jpg) no-repeat;
display: block;
width: 150px;
height: 110px;
margin-left: 20px;
}
a.r2:hover {
background: url(/elements/img/4.jpg) no-repeat;
}
a.r3 {
background: url(/elements/img/6.jpg) no-repeat;
display: block;
width: 88px;
height: 66px;
margin-left: 55px;
}
a.r3:hover {
background: url(/elements/img/7.jpg) no-repeat;
}
li.menu_1 {
float: left;
margin-top: -39px;
margin-left: 117px;
font-size: 25px;
font-weight: bold;
z-index: 2;
position: relative;
}
li.menu_1 ul {
display: none;
padding-left: 10px;
margin-left: -13px;
font-size: 18px;
text-align: center;
background-color: #2c417d;
opacity: 0.9;
width: 192px;
height: 110px;
}
li.menu_1 ul li {
border: 1px solid #fff;
margin-left: -5px;
width: 100%;
display: block;
border-left: none;
border-right: none;
border-top: none;
padding: 7px 0;
}
li.menu_1:hover ul {
display: block;
position: absolute;
}
li.menu_1:hover ul li {
float: none;
}
li.menu_1:hover ul li a {
padding: 6px 0 8px;
color: #fff;
}
|
| |
| |
|
