导航一二级栏目，鼠标悬停及点击事件实现高亮-白红宇

导航一二级栏目，鼠标悬停及点击事件实现高亮

阅读量：7088 次

发布时间：2019-06-28

本文共 4453 字，大约阅读时间需要 14 分钟。

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;

}

</li>

<ul>

</li>

</li>

</li>

</ul>

</li>

<ul>

</li>

</li>

</ul>

</li>

<ul>

</li>

</li>

</ul>

</li>

</ul>

</div>

</nav>

</div>

转载于:https://www.cnblogs.com/zyl-930826/p/8649433.html

你可能感兴趣的文章

Creating Dialogbased Windows Application (1) / 创建基于对话框的Windows应用程序（一）新建窗体 / VC++, Windows...

查看>>

自定义函数Function

查看>>

SPSS-非参数检验—两独立样本检验案例解析

查看>>

微软职位内部推荐-Senior Software Engineer-DUT

查看>>

ruby的require路径问题

查看>>

[JSOI2008]巨额奖金（最小生成树计数）

查看>>

Oracle性能优化--AUTOTRACE 操作

查看>>

sublime text3 package control 问题

查看>>

【转】测试职业思考：如何成为一名优秀的软件测试工程师

查看>>

EventHandler 与常见的.Net预定义委托

查看>>

js倒计时页面跳转

查看>>

angularjs的ng-keyup事件之回车事件

(8)Microsoft office Word 2013版本操作入门_制作传单海报