导航一二级栏目，鼠标悬停及点击事件实现高亮
css:#newnav{
width: 100%;
height: 45px;
line-height: 45px;
background: url(../images/nav_bg.jpg) 0 0 repeat-x;
margin-top:30px;
}
.main-menu {
width:1200px;
margin:0 auto;
position: relative;
font-family: Arial, sans-serif;
-webkit-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
-moz-transition: all 300ms ease;
transition: all 300ms ease;
}
.main-menu .navbar-collapse {
padding: 0px;
}
.main-menu .navigation {
position: relative;
margin: 0px;
}
.main-menu .navigation>li {
width: 130px;
text-align: center;
display: inline-block;
padding: 0px 0px;
}
.main-menu .navigation>li>a {
position: relative;
display: block;
font-size:14px;
color: #fff;
line-height: 45px;
text-transform: uppercase;
letter-spacing: 0px;
opacity: 1;
border-radius: 2px;
transition: all 500ms ease;
-moz-transition: all 500ms ease;
-webkit-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
}
.main-menu .navigation>li:hover>a,
.main-menu .navigation>li.current>a,
.main-menu .navigation>li.current-menu-item>a {
color: #2078c2;
background: url(../images/tilte_bg.jpg) 0 45px;
}
.main-menu .navigation>li>ul {
position: absolute;
width: 130px;
padding: 0px;
z-index: 100;
display: none;
background: #ffffff;
border-top: 3px solid #2078c2;
transition: all 300ms ease;
-moz-transition: all 300ms ease;
-webkit-transition: all 500ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
-webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
-ms-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
-o-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
}
.main-menu .navigation>li>ul>li {
position: relative;
width: 100%;
border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}
.main-menu .navigation>li>ul>li:last-child {
border-bottom: none;
}
.main-menu .navigation>li>ul>li>a {
position: relative;
display: block;
line-height: 40px;
font-weight: 100;
font-size: 13px;
text-transform: capitalize;
color: #272727;
transition: all 500ms ease;
-moz-transition: all 500ms ease;
-webkit-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
}
.main-menu .navigation>li>ul>li:hover>a,
.main-menu .navigation>li>ul>li.current>a {
color: #2078c2;
background: url(../images/tilte_bg.jpg) 0 45px;
}
.main-menu .navigation>li>ul>li>ul>li {
position: relative;
width: 100%;
border-bottom: 1px solid #2078c2;
}
.main-menu .navigation>li>ul>li>ul>li:last-child {
border-bottom: none;
}
.main-menu .navigation>li>ul>li>ul>li>a {
position: relative;
display: block;
padding: 5px 8px;
line-height: 24px;
font-weight: 100;
font-size: 12px;
text-transform: capitalize;
color: #272727;
transition: all 500ms ease;
-moz-transition: all 500ms ease;
-webkit-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
}
.main-menu .navigation>li.dropdown:hover>ul {
visibility: visible;
opacity: 1;
top: 100%;
}
.main-menu .navigation li>ul>li.dropdown:hover>ul {
visibility: visible;
opacity: 1;
top: 0;
transition: all 300ms ease;
-moz-transition: all 300ms ease;
-webkit-transition: all 500ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
}
.main-menu .navigation>li>ul,
.main-menu .navigation>li>ul>li>ul {
display: block !important;
visibility: hidden;
opacity: 0;
}
<div id="newnav">
<div class="auto-container">
<div class="nav-outer clearfix">
<!-- Main Menu：头部导航 -->
<nav class="main-menu">
<div class="navbar-collapse collapse clearfix">
<ul class="navigation clearfix">
<li navid="Home">
<a href="">11</a>
</li>
<li class="dropdown">
<a href="">22</a>
<ul>
<li class="dropdown">
<!--二级导航-->
<a href="">222</a>
</li>
<li class="dropdown">
<a href="">222</a>
</li>
<li class="dropdown">
<a href="">222</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="">33</a>
<ul>
<li class="dropdown">
<a href="">333</a>
</li>
<li class="dropdown">
<a href="">333</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="">44</a>
<ul>
<li class="dropdown">
<a href="">444</a>
</li>
<li class="dropdown">
<a href="">444</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
