纯CSS制作的二级导航菜单栏(通过变化菜单栏的样式实现)

最新推荐文章于 2021-12-24 18:49:22 发布

interiors

最新推荐文章于 2021-12-24 18:49:22 发布

阅读量1.2k

点赞数 1

分类专栏： WEB APPLICATION 文章标签： css 导航 menu 菜单栏

本文链接：https://blog.csdn.net/InnerVoice/article/details/31361793

版权

使用纯CSS制作二级导航菜单栏，通过改变列表的样式实现。核心在于鼠标移到和移出目标时菜单栏的高度！

<html> 
<head> 
<title>Secondary Navigation Menu</title> 
</head> 
<style>
  body{ background-color:white;
        font-size:12px;
        font-family:Arial, Helvetica, sans-serif;
        magin:0px;
        padding:0px;
       
       }
 
   ul,li{
          margin:0px;
          padding:0px;
        }

  #nav{
        padding:5px;
        position:absolute;
        z-index:1;
        left:200px;
        top:200px;
      }

     li{
         display:inline;
        list-style:none;
        list-style-position:outsite;
        text-align:center;
        font-weight:bold;
        float:left;
        }
     a:link{
        color:#000;
        text-decoration:none;
        
        width:100px;
       padding:3px 5px 0px 5px; 
       }
     a:vi