search

Home >Web Front-end >HTML Tutorial >Please solve my navigation problem. It's a small problem. Please give me an expert_html/css_WEB-ITnose

Please solve my navigation problem. It's a small problem. Please give me an expert_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:44:571105browse





Document

*{
margin: 0;
padding: 0;
list-style:none;
}
.nav_1{
border-radius: auto;
box-shadow: 10px 10px 5px #888888;
text-align: right;
height: 50px;
margin-top: 50px;
margin-right: auto;
margin-bottom: 50px;
margin-left: auto;
background-color: #930;
}
.nav_1>ul{
display: inline-block;
list-style: none;
position: relative;
width: 960px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
text-align: center;
}
.nav_1>ul>li>a{
display: block;
width: 105px;
color: #FFFFFF;
text-align: center;
text-decoration: none;
background-color: #930;
}
.nav_1>ul>li{
line-height: 50px;
display: inline-block;
margin-right: auto;
margin-left: auto;
float: left;
font-family: "新宋体";
font-weight: bold;
}
.nav_1>ul>li>ul{
list-style: none;
display: none;

}
.nav_1>ul>li>ul>li{
display: block;
line-height: 25px;
}
.nav_1>ul>li>ul>li>a{

border-radius:55px;
display: block;
width: 100px;
color: #FFFFFF;
text-align: center;
text-decoration: none;
background-image: url(red flash 11.png);
line-height: 40px;
background-position: center center;
}
.nav_1>ul>li:hover>ul{
display: block;
}

.nav_1 li a:hover{
color: #000;
}
.nav_1 li ul li a:hover{
color: #ff0;
background-color: #000;
}
.nav_1 ul li a.thisclass{
border-radius:55px;
text-decoration: none;
background-color: #CF0;
}


<script> <br> $(function(){ <br> var nav_1 = $(".nav_1 a"); <br> nav_1.click(function(){ <br> $(this).addClass("thisclass").siblings().removeClass("thisclass"); <br> }); <br> }); <br> </script>





  • 主页
             

                 
    • 二级栏目

      •   
               
    • 二级栏目

      •          

      

  • 音乐
             

               
    • 二级栏目


      •          
    • 二级栏目

      •          


    •   
  • 视频
              

    • Second-level column



      • 🎜>                                                                                                      ="#">Secondary column
                                                ">About
                                                                 🎜>                                                                                                                          /ul>







    • My navigation focus clicks on other It will cause other backgrounds to change. The previous one will not disappear. When I need to click on music, the homepage disappears. When I click on a video, the music disappears. How to solve it???? Plan)

    Someone please come! ! !

    $(function(){
    var nav_1 = $(".nav_1 a");
    nav_1.click(function(){
    $(this).closest("ul ").children("li").children("a").removeClass("thisclass");
    $(this).addClass("thisclass");
    });
    }) ;

    Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：The best way to set the thin border of Table with CSS_html/css_WEB-ITnoseNext article：The best way to set the thin border of Table with CSS_html/css_WEB-ITnose

    Related articles

    See more