您的位置: 首页  >  文章  >  前端案例：蓝色CSS3二级导航菜单

前端案例：蓝色CSS3二级导航菜单

分类: 文章 • 2025-01-03 10:38:04

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> 导航 </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style>
    body {
        background: #eee;
        margin: 0;
        padding: 0; 
    }

    #nav {
        width: 1000px;
        margin: 20px auto;
        height: 50px;
        background:cornflowerblue;
        border-radius: 15px;
        padding-top: 10px;
        box-shadow: 0 2px 2px 1px #000;
    }

    #nav li {
        float: left;
        list-style: none;
        text-align: center;
        height: 40px;
        width: 80px;
        padding: 8px 10px;
    }

    #nav a {
        font-weight: bold;
        color: #f4f4f4;
        text-decoration: none;
        display: block;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        text-shadow: 0 1px 1px #000;
    }

    #nav li:hover > a {
        background:#f4f4f4 repeat-x 0 -20px;
        color: #000;
        border-top: 1px solid #f8f8f8;
        box-shadow: 0 2px 2px rgba(0,0,0, .7);
        -moz-box-shadow: 0 2px 2px rgba(0,0, .7);
        -webkit-box-shadow: 0 2px 2px rgba(0,0, .7);
        text-shadow: 0 2px 2px  rgb(255,255,255, 0.7);
    }

    #nav ul li:hover a, #nav li:hover li a {
        background: none;
        border: none;
        color:#000;
    }

    #nav ul li a:hover {
        background:#335599 repeat-x 0 -100px;
        color:#fff;
        border-radius:10px;
        -moz-border-radius:10px;
        -webkit-border-radius:10px;
        text-shadow:0 2px 2px rgba(0,0,0, 0.7);
    }

    #nav ul li:first-child > a {
        -moz-border-radius-topleft: 10px;
        -moz-border-radius-topright:10px;
        -webkit-border-top-left-radius:10px;
        -webkit-border-top-right-radius:10px;
    }

    #nav ul li:last-child > a {
        -moz-border-radius-buttomleft:10px;
        -moz-border-radius-buttomright:10px;
        -webkit-border-bottom-left-radius:10px;
        -webkit-border-bottom-right-radius:10px;
    }

    #nav li:hover > ul {
        opacity:1;
        visibility:visible;
    }

    #nav ul {
        opacity:0;/*opacity 属性设置元素的不透明级别。*/
        visibility:hidden;/*visibility 属性规定元素是否可见。hidden元素是不可见的。*/
        padding:0;
        width:120px;
        position:absolute;
        background:#aabbcc repeat-x 0 0;
        border:1px solid #7788aa;

        border-radius:10px;
        -moz-border-radius:10px;
        -web-border-radius:10px;
        box-shadow:0 2px 2px rgba(0,0,0, .5);
        -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
        -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);

        -moz-transiton:opacity .25 linear, visibility .1s linear .1s;
        -webkit-transiton:opacity .25s linear, visibility .1s linear .1s;
        -o-transition:opacity .25s linear, visibility .1s linear .1s;
        transition:opacity .25s linear, visibility .1s linear .1s;

    }

    #nav ul li {
        float:none;
        margin:0;
    }

    #nav ul a {
        font-weight:normal;
        text-shadow:0 2px 2px rgba(255,255,255, 0.7);
    }

    #nav ul ul {
        left:160px;
        top:0px;
    }

    #bottom {
        width:100%;
        text-align: center;
    }


  </style>
 </head>

 <body>
     <nav>
        <ul id="nav">
              <li><a href="#">首页</a></li>
      <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></li>
     <li><a href="#">公司简介</a></li>
     <li><a href="#">联系我们</a></li>
     <li><a href="#">加盟伙伴</a></li>
   
   </ul>
</nav>
  
 </body>
</html>

案例效果图：

前端案例：蓝色CSS3二级导航菜单

 

相关推荐