Здравствуйте, помогите, пожалуйста. Весь мозг себе сломал - и ничего не выходит...
Нужно, чтобы при наведении на <a href="#">Скорей Домой</a>
открывалось <li class="sub" id="sub4">
.
Вот код:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="description" content="description">
<title></title>
<link rel="stylesheet" media="screen" href="jquery.css" />
<script src="http://teste123reee.ucoz.com/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#menu li").hover(function() {
$(this).stop().animate({ marginTop: "-100px" }, 400);
},function(){
$(this).stop().animate({ marginTop: "0px" }, 400);
});
});
</script>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#" class="top">Гавная</a><a href="#">Скорей Домой</a></li>
</ul>
</div>
<div class="example">
<ul class="menu">
<!-- Верхние пункты -->
<li class="main" id="has-sub4"><a target="_blank" href="#">Открывающиеся <br>Меню</a></li>
<!-- Подпункты -->
<li class="sub" id="sub4">
<table><tr>
<td>
<dl>
<dt>Ссылки x</dt>
<dd><a target="_blank" href="#">Ссылка x</a></dd>
<dd><a target="_blank" href="#">Ссылка x</a></dd>
<dd><a target="_blank" href="#">Ссылка x</a></dd>
<dd><a target="_blank" href="#">Ссылка x</a></dd>
<dd><a target="_blank" href="#">Ссылка x</a></dd>
<dd><a target="_blank" href="#">Ссылка x</a></dd>
<dd><a target="_blank" href="#">Ссылка x</a></dd>
</dl>
</td>
<td>
<dl>
<dt>Ссылки x</dt>
<dd><a target="_blank" href="#">Ссылка x</a></dd>
<dd><a target="_blank" href="#">Ссылка x</a></dd>
<dd><a target="_blank" href="#">Ссылка x</a></dd>
<dd><a target="_blank" href="#">Ссылка x</a></dd>
<dd><a target="_blank" href="#">Ссылка x</a></dd>
<dd><a target="_blank" href="#">Ссылка x</a></dd>
<dd><a target="_blank" href="#">Ссылка x</a></dd>
</dl>
</td>
<td>
<dl>
<dt>Ссылки x</dt>
<dd><a target="_blank" href="#">Ссылка x</a></dd>
<dd><a target="_blank" href="#">Ссылка x</a></dd>
<dd><a target="_blank" href="#">Ссылка x</a></dd>
<dd><a target="_blank" href="#">Ссылка x</a></dd>
<dd><a target="_blank" href="#">Ссылка x</a></dd>
<dd><a target="_blank" href="#">Ссылка x</a></dd>
<dd><a target="_blank" href="#">Ссылка x</a></dd>
</dl>
</td>
<td>
<dl>
<dt>Ссылки x</dt>
<dd><a target="_blank" href="#">Ссылка x</a></dd>
<dd><a target="_blank" href="#">Ссылка x</a></dd>
<dd><a target="_blank" href="#">Ссылка x</a></dd>
<dd><a target="_blank" href="#">Ссылка x</a></dd>
<dd><a target="_blank" href="#">Ссылка x</a></dd>
<dd><a target="_blank" href="#">Ссылка x</a></dd>
<dd><a target="_blank" href="#">Ссылка x</a></dd>
</dl>
</td>
</tr></table>
</li>
</ul>
<div style="clear:both"></div>
</div>
</body>
</html>
Это CSS
* {
padding: 0;
margin: 0;
}
/* Основные стили меню */
body,html{
width: 100%;
height: 100%; }
#menu {
height:5%; width: 100%;
overflow: hidden;
margin: 10% auto;
text-align: center;
background:#099;
font-family:Verdana, sans-serif;
list-style:none;
margin:0;
min-height:35px;
padding:0;
position:relative;
z-index:1;
}
#menu ul li {
float: left;
margin: 0 0.2%;
list-style-type: none;
width: 16%;
height: 50%;
}
#menu ul {
width: 100%;
}
/* Стили ссылок меню */
#menu ul a.top {
background: black; color: #008000;
font: 1.5vw/170% "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
#menu ul a {
display: block;
background: red; color: #fff;
height: 100px; width: 100%;
font: lighter 1.5vw/170% "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-decoration: none;
}
--------------Всплывающее----------
.example{
height:100%; width: 100%;
background:#0C3 !important;
border:#006 2px !important;
}
.menu {
list-style:none;
margin:0;
min-height:35px;
padding:0;
position:relative;
height:10% !important; width:50% !important;
z-index:1;
background: #033;
left:20%;
margin-top:15%;
}
.menu li{
}
.menu li.main {
height:10% !important; width:100% !important;
padding-right:1px;
position:relative;
list-style:none;
z-index:1;
left:0%;
margin-top:5%;
background:#0C3;
}
.menu li.main a {
font:1.4vw/60% "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-decoration: none;
display:block;
position:absolute;
margin-top:-4%;
left:43%;
}
.block1:hover + .block2 { visibility: visible; }
.menu li.sub {
background-color:#444;
border:0;
clear:both;
float:center;
height:0;
overflow:hidden;
position:relative;
width:100%;
-moz-transform-origin: left top !important;
-ms-transform-origin: left top !important;
-o-transform-origin: left top !important;
-webkit-transform-origin: left top !important;
transform-origin: left top !important;
-moz-transition: height 0.5s ease-in-out !important;
-ms-transition: height 0.5s ease-in-out ;
-o-transition: height 0.5s ease-in-out;
-webkit-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out;
-moz-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
.menu li.sub table {
width:100%
}
.menu li.sub dl {
background-color:#fff;
height:195px;
margin:5px 5px 0 0;
padding:10px;
-moz-border-radius:8px;
border-radius:8px
}
.menu li.sub dt {
border:1px solid #000;
color:#000;
font-size:14px;
font-weight:700;
line-height:18px;
margin:1px 0;
padding:0 10px;
border-radius:5px;
-moz-border-radius:5px
}
.menu li.sub dt:hover {
background-color:#ccc
}
.menu li.sub dd {
margin:0;
padding:0
}
.menu li.sub dd a {
color:#666;
display:block;
font-size:12px;
line-height:20px;
padding-left:30px;
text-decoration:none;
-moz-border-radius:5px;
border-radius:5px
}
.menu li.sub dd a:hover {
background-color:#ccc;
color:#444
}
.menu li#has-sub4:hover ~ li#sub4 {
height:270px;
-moz-transition: height 0.5s ease-in-out 0.2s
-ms-transition: height 0.5s ease-in-out 0.2s
-o-transition: height 0.5s ease-in-out 0.2s
-webkit-transition: height 0.5s ease-in-out 0.2s
transition: height 0.5s ease-in-out 0.2s
}
li#sub4:hover {
height:250px;
-moz-transition: height 0.5s ease-in-out 0.2s
-ms-transition: height 0.5s ease-in-out 0.2s
-o-transition: height 0.5s ease-in-out 0.25
-webkit-transition: height 0.5s ease-in-out 0.2s
transition: height 0.5s ease-in-out 0.2s
}