web建站教程

  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. seo教程
  6. 前端知识
  7. 百度echarts
  8. php入门
    nodejs
    mockjs
    mysql
    织梦cms
    帝国cms
    git教程

当前位置: 建站教程 > 前端知识 >

远离javascript/jquery纯css3实现多级导航栏联动

80 ℃

下面web建站教程为大家介绍一下远离javascript/jquery纯css3实现多级导航栏联动

功能介绍:今天给大家介绍一个用纯css3实现多级导航栏联动。不用一行js代码,纯纯的css3

1、html代码:

<ul class="top-nav">
  <li><a href="#">中国朝代史</a></li>
  <li><a href="#">汉朝</a>
    <ul>
      <li><a href="#">东汉</a>
        <ul>
          <li><a href="#">刘邦</a></li>
          <li><a href="#">刘彻</a></li>
          <li><a href="#">刘病已</a></li>
        </ul>
      </li>
      <li><a href="#">西汉</a>
        <ul>
          <li><a href="#">刘秀</a></li>
        </ul>
      </li>
      <li><a href="#">王莽</a></li>
    </ul>
  </li>
  <li><a href="#">隋唐</a>
    <ul>
      <li><a href="#">隋朝</a>
        <ul>
          <li><a href="#">杨坚</a></li>
          <li><a href="#">杨广</a></li>
        </ul>
      </li>
      <li><a href="#">唐朝</a>
        <ul>
          <li><a href="#">李渊</a></li>
          <li><a href="#">李世民</a></li>
          <li><a href="#">武则天</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">明朝</a></li>
  <li><a href="#">清朝</a></li>
</ul>

2、css代码:

.top-nav{
    width 960px;
    margin: 0 auto;
    list-style: none;
    background-image: linear-gradient(#444, #111);
    border-radius: 6px;
    box-shadow: 0 1px 10px #777;
}
.top-nav:before,.top-nav:after{
    content: "";
    display: table;
}
.top-nav:after{
    clear: both;
}
.top-nav>li{
    float: left;
    border-right: 1px solid saddlebrown;
    position: relative;
    line-height: 40px;
}
.top-nav li{
    position: relative;
}
.top-nav>li a{
    font: "微软雅黑" 12px;
    text-decoration: none;
    color: goldenrod;
    padding: 12px 30px;
}
.top-nav>li a:hover{
    color:#fafafa;
}
.top-nav li ul{
    position: absolute;
    border-radius: 6px;
    z-index: 1;
    top: 40px;
    left: 0px;
    list-style: none;
    background-image: linear-gradient(#444, #111);
    box-shadow: 0 -1 0 rgba(255,255,255,0.3);
    visibility: hidden; /*这里只能用hidden 不能display*/
    opacity: 0;
    margin: 20px 0 0 0;
    transition: all .2s ease-in-out;
}
.top-nav ul ul{
    margin-left: 20px;
    margin-top: 20px;
}
.top-nav ul li:hover>ul{
    margin-left: 0px;
}
 .top-nav li:hover>ul{
    opacity: 1;
    visibility: visible;
    margin: 0;
}
.top-nav ul a{
    padding: 15px;
    width: 70px;
    display: block;
}
.top-nav ul a:hover{
    background-image: linear-gradient(#04acec, #0186ba);
}
.top-nav ul li:first-child>a{
    border-radius: 6px 6px 0 0;
}/*第一个跟最后一个a标签设置圆角*/
.top-nav ul li:last-child>a{
    border-radius: 0 0 6px 6px;
}
.top-nav ul li{
    box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}/*两个阴影叠加产生间隔*/
.top-nav ul li:first-child>a:before{
    content: "";/*这句不可少,少了没效果*/
    display: block;
    width: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #444;
    position: absolute;
    top: -6px;
    left: 40px;
}
.top-nav ul li:first-child>a:hover:before{
    border-bottom: 6px solid #04acec;
}
.top-nav ul ul{
    top: 0px;
    left: 100px;
}
.top-nav ul ul li:first-child>a:before{ 
    border-top: 6px solid transparent;
    border-right: 6px solid #444;
    border-bottom: 6px solid transparent;
    position: absolute;
    top: 20px;
    left: -12px;
}
.top-nav ul ul li:first-child>a:hover:before{
    border-bottom: 6px solid transparent;
    border-right: 6px solid #04acec;
}
.top-nav ul li:last-child{
    box-shadow: none;
}

css3解决滚动条太难看问题

纯css3绘制数字,文字太长自动显示...

CSS3滤镜如何实现波浪效果(附代码)

css3文字快闪切换动画效果代码

上面是“远离javascript/jquery纯css3实现多级导航栏联动”的全面内容,想了解更多关于 前端知识 内容,请继续关注web建站教程。

当前网址:https://ipkd.cn/webs_2288.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

AppScan检测“X-XSS-Protection”头缺失或不安全等问题解决方案

问题描述:用AppScan检测检查网页安全性能,出现以下问题:

1、检测到隐藏目录
2、缺少“Content-Security-Policy”头
3、缺少“X-Content-Type-Options”头
4、缺少“X-XSS-Protection”头

web建站小编用的是IIS服务器,在项目文件夹下面新建一个web.config文件,写入以下代码:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
<add name="Content-Security-Policy" value="default-src *;style-src 'self' 'unsafe-inline';script-src 'self' 'unsafe-inline' 'unsafe-eval';img-src * data:;worker-src * blob:;font-src 'self' data:;" />
<add name="X-Content-Type-Options" value="nosniff" />
<add name="X-XSS-Protection" value="1" />
           </customHeaders>
        </httpProtocol>
        <httpErrors>
            <remove statusCode="403" subStatusCode="-1" />
            <error statusCode="403" prefixLanguageFilePath="%SystemDrive%\inetpub\custerr" path="404.htm" responseMode="File" />
        </httpErrors>
    </system.webServer>
</configuration>
点击阅读全文
上一篇:纯css3绘制数字,文字太长自动显示...
下一篇:css3解决滚动条太难看问题