Question

我需要在悬停时显示第二层，并在用户离开主导航并将鼠标移动到第二级时保持显示。

我拥有它的方式，当鼠标离开主条时，它会消失。

HTML

<header>



    <div id='navbar'>


        <nav id='navframe' class='round'>


            <div class='black round group'>

                <!--Logo-->
                <h1 class='logo'><a href='#'>logo</a></h1>

                <!--Primary Nav-->
                <ul class='pNav pull-left group'>
                    <li><a id='pShop' class="" href='#'>Item 1</a></li>
                    <li><a id='pSupport' href='#'>Item 2</a></li>
                    <li><a id='pManage' href='#'>Item 3</a></li>
                </ul>

                    <!--Secondary Nav-->
                    <div id='sShop' class='sNav group'>
                        <ul class='group'>
                            <li><a class="active" href='#'>Item 1-1</a></li>
                            <li><a href='#'>Item 1-2</a></li>
                            <li><a href='#'>Item 1-3</a></li>
                        </ul>


                        <!--Tertiary Nav-->
                        <div id='tShop' class='tNav group'>

                            <!--Col1-->
                            <ul class='col4'>

                                <li class="colHead">Heading</li>
                                <li><a href='#'>Item 1-1-1</a></li>
                                <li><a href='#'>Item 1-1-2</a></li>
                                <li><a href='#'>Item 1-1-3</a></li>
                            </ul>

                                                            <!--Col2-->
                            <ul class='col4'>

                                <li class="colHead">Heading</li>
                                <li><a href='#'>Item 1-1-1</a></li>
                                <li><a href='#'>Item 1-1-2</a></li>
                                <li><a href='#'>Item 1-1-3</a></li>
                            </ul>

                                                            <!--Col3-->
                            <ul class='col4'>

                                <li class="colHead">Heading</li>
                                <li><a href='#'>Item 1-1-1</a></li>
                                <li><a href='#'>Item 1-1-2</a></li>
                                <li><a href='#'>Item 1-1-3</a></li>
                            </ul>

                                                            <!--Col4-->
                            <ul class='col4'>

                                <li class="colHead">Heading</li>
                                <li><a href='#'>Item 1-1-1</a></li>
                                <li><a href='#'>Item 1-1-2</a></li>
                                <li><a href='#'>Item 1-1-3</a></li>
                            </ul>

                        </div>


                    </div>



            </div>



        </nav>
    </div>

</header>

CSS

    /*Reset*/

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    font-family: helvetica, Arial, sans-serif;
    font-weight:300;
    vertical-align:baseline;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
    display:block;
}
body{
    line-height:1;
}
ol,ul{
    list-style:none;
}
blockquote,q{
    quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
    content:’’;
    content:none;
}
:focus{
    color:#fff;
    background: #333;
} 

ins{
    text-decoration:none;
}
del{
    text-decoration:line-through;
}

table{
    border-collapse:collapse;
    border-spacing:0;
}

/*Global*/

a{
    color:006699;
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

#wrapper{
    margin:0px auto;
}


.group:after {
  content: "";
  display: table;
  clear: both;
}

.pull-left{
    float:left;
}

.pull-right{
    float:right;
}

.content{
    width:974px;
    margin:0px auto;
    display:block;
    }    

/*Buttons*/
.btn{    
    display:block;
    padding:10px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

a.btnBlue{
    text-decoration:none;
    background-color:#2192c6;
    color:#fff;
}

a.btnBlue:hover{
    background-color:#1e83b2;
}

a.btnBlue:active{
    background-color:#333;
}

a.btnWhite{}
a.btnGreen{}


/*Navigation*/

#util{
    font-size:12px;
    background-color:#666;
    padding:10px;
    color:#fff;
}

#userbar div{
    display:block;
    padding: 15px;
    font-size:12px;
}

#navframe{
    width:974px;
    margin:0px auto;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:    0px 0px 10px 0px rgba(0, 0, 0, 0.3);
    box-shadow:         0px 0px 10px 0px rgba(0, 0, 0, 0.3);}

#navframe a{
    display:block;
}

.black{
    color:#fff;
    background-color:#333;
}


.round{
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;

}

/*logo*/

.logo{

    float:left;
    width:55px;
    height:55px;
}

.logo a{
    border-radius:5px 0px 0px 5px;
    -moz-border-radius:5px 0px 0px 5px;
    padding:10px;
    border-right:solid 1px #000;
    float:left;
    width:35px;
    height:35px;
}

.logo a:hover{
    background-color:#df6801;

}

/*Primary Nav*/

.pNav li .active{
    color:#ef6f00;
    background-color:#fff;
}


.pNav{
    padding-top:10px;
    font-size:15px;
    font-weight:thin;

}

.pNav li{
    display:block;
    float:left;
}

.pNav li a{
    color:#fff;
    text-decoration:none;
    border-radius:5px 5px 0px 0px;
    -moz-border-radius:5px 5px 0px 0px;
    display:block;
    padding:11px 15px 19px 15px;
    float:left;
}

.pNav li a:hover{
    text-decoration:underline;
}



/*Secondary Nav*/
.sNav{
    border-left: solid 1px #ccc;
    border-right: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    border-radius:0px 0px 5px 5px;
    -moz-border-radius:0px 0px 5px 5px;
    background-color:#fff;
    display:none;
    clear:both;
}

.sNav ul li{
    float:left;    
}


.sNav ul {
    padding-left:10px;

}

.sNav ul li a{
    font-size:12px;
    padding:15px 10px 15px 10px;
    text-decoration:none;
    color:#999;
}

.sNav ul li a:hover{
    color:#333;
}

.sNav li .active{
    color:#ef6f00;
}

/*Tertiary Nav*/
.tNav{
    border-top: solid 1px #ccc;
    padding:10px;
    background-color:#f4f4f4;
    border-radius:0px 0px 5px 5px;
    -moz-border-radius:0px 0px 5px 5px;
    display:none;
    clear:both;
}

.tNav ul li{
    float:none;    
}


.tNav ul{
    padding:0px;   
}

.tNav ul li a:hover{
    text-decoration:underline;
    color:#006699;
}

.tNav ul li a{
    font-size:12px;
    padding:10px 10px 10px 10px;
    text-decoration:none;
    color:#006699;
}

.colHead{
    margin:0px 10px;
    font-weight:400;
    font-size:15px;
    border-bottom:dotted 1px #ccc;
    padding:5px 10px 10px 0px;
    text-decoration:none;
    color:#333;
}

.col4{
    width:25%;
    float:left;

}

JS

 $("#pShop").hover(function(){
        $('#sShop').show();
        $( "#pShop" ).addClass( "active" );

        },
        function(){
        $('#sShop').hide();
        $( "#pShop" ).removeClass( "active" );

        });

Answer 1

在您的HTML中，我添加了.nav-btn以便于选择导航元素，并在您将鼠标悬停在其他导航栏时将其删除。请查看此JSFiddle

<ul class='pNav pull-left group'>
    <li class="nav-btn"><a id='pShop' class="" href='#'>Item 1</a></li>
    <li class="nav-btn"><a id='pSupport' href='#'>Item 2</a></li>
    <li class="nav-btn"><a id='pManage' href='#'>Item 3</a></li>
</ul>

jQuery的：

$(".nav-btn").hover(function(){
    if($(this).find("a").attr("id") == "pShop"){
        $('#sShop').show();
        $( "#pShop" ).addClass( "active" );
    } else {
        $('#sShop').hide();
        $( "#pShop" ).removeClass( "active" );
    }
});

2级导航栏

1 个答案: