0

我有一个简单的问题，我试图创建一个可扩展的淹死......使用 jQuery 切换。

我可以使整体功能正常工作，但由于某种原因，我的子菜单与主菜单重叠。我相信这与属性有关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();}
);

我认为我很接近，但任何帮助将不胜感激。

4

3 回答 3

3

我会单独使用 css 修复它（nno jQuery）：示例 => 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;*/
    }
于 2013-09-19T11:07:57.147 回答
0

可能不是完美的答案，但是当我尝试它时，这很有效：

.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;
}

我刚刚从 .menu 中删除了 'paddign-top: 70px' 并在 .sub 中添加了一个 'top: 70px'

于 2013-09-19T14:22:15.707 回答
0

在您的班级.sub中，您将其位置设置为position:absolute但没有指定位置。

尝试添加top:100%;到您的课程.sub中。这样，它就在您的菜单下。所以不再重叠。

于 2013-09-19T20:32:35.157 回答