У меня есть простая проблема, я пытаюсь создать расширяемый потомок.. используя jQuery toggle.
Я могу заставить работать всю функцию, но по какой-то причине мое подменю больше притирается к основному. Я полагаю, что это имеет какое-то отношение к атрибуту padding-top: 70px;
Я пытаюсь воссоздать меню NAV, которое можно найти здесь: http://adidasdesignstudios.com/
HTML:
<header class="menu">
<div class="sub">
<nav>
<ul class="sub-options">
<li>
<div>
<a href="#all_crafted">1_</a>
<section><br>Check out product designs.</section>
</div>
</li>
<li>
<div>
<a href="#all_about">2_</a>
<section><br>Find out more about.</section>
</div>
</li>
<li>
<div>
<a href="#all_in">3_</a>
<section><br>Learn design.</section>
</div>
</li>
<li>
<div>
<a href="#all_jobs">4_</a>
<section><br>View current job opportunities.</section>
</div>
</li>
<li>
<div>
<a href="#all_cities">5_</a>
<section><br>See our locations.</section>
</div>
</li>
<li>
<div>
<a href="#all_academy">6_</a>
<section><br>Learn more.</section>
</div>
</li>
</ul>
</nav>
</div>
</header>
CSS:
.menu {
color:#515151;
height:70px;
left:0;
width:100%;
background-color:rgba(19,19,19,0.8);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC131313,endColorstr=#CC131313);
top:0;
position:fixed;
zoom:1;
margin:0 auto;
display:block;
padding-top:70px;
.sub {
background:#fff;
position:absolute;
z-index:2;
width:100%;
border-radius:3px;
/*box-shadow:0 2px 4px #ddd;*/
border:1px solid #ddd;
display:none;
/*padding:40px 0 3px;*/
}
JQuery:
$(".menu").hover(
function(){$(".sub").slideToggle(400);},
function(){$(".sub").hide();}
);
Я думаю, что им близко, но любая помощь будет оценена по достоинству.
Я исправлю его только css (nno jQuery): Example => jsfiddle
Кроме того, в коде отсутствует "}":
.menu {
color:#515151;
height:70px;
left:0;
width:100%;
background-color:rgba(19, 19, 19, 0.8);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC131313, endColorstr=#CC131313);
top:0;
position:fixed;
zoom:1;
margin:0 auto;
display:block;
padding-top:70px;
**}**
.sub {
background:#fff;
position:absolute;
z-index:2;
width:100%;
border-radius:3px;
/*box-shadow:0 2px 4px #ddd;*/
border:1px solid #ddd;
display:none;
/*padding:40px 0 3px;*/
}
В вашем классе .sub
вы устанавливаете свое положение в position:absolute
но нигде вы не указываете позицию.
Попробуйте добавить top:100%;
в вашем классе .sub
. Таким образом, это будет прямо под вашим меню. Так что больше не перекрывается.
Не может быть идеальным ответом, но это работает, когда я пробовал:
.menu {
color:#515151;
height:70px;
left:0;
width:100%;
background-color:rgba(19, 19, 19, 0.8);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC131313, endColorstr=#CC131313);
top:0;
position:fixed;
zoom:1;
margin:0 auto;
display:block;
}
.sub {
background:#fff;
position:absolute;
z-index:2;
width:100%;
border-radius:3px;
/*box-shadow:0 2px 4px #ddd;*/
border:1px solid #ddd;
display:none;
/*padding:40px 0 3px;*/
top: 70px;
}
Я просто удалил "paddign-top: 70px" из.menu и добавил "top: 70px" в.sub