css实现菜单内容变换

最新推荐文章于 2024-03-19 17:43:02 发布

原创最新推荐文章于 2024-03-19 17:43:02 发布 · 909 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #菜单内容变换

前端开发专栏收录该内容

9 篇文章

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>变换菜单</title>
  <style type="text/css">
  *{margin-top: 0;
    padding: 0;}
  #menu{
       width: 600px;
       
       margin-top: 100px;
       margin-top: 0 auto;
       border: 1px solid #000;
       margin-left: 100px;
       overflow: auto;/* 这段代码是关键，overflow 为CSS中设置当对象的内容超过其指定高度及宽度时如何管理内容的属性。这里是超出#menu的宽度的部分被剪切*/
  }


   #menu ul{list-style: none;}
   #menu ul li{line-height: 40px;
        text-align: center;
        float: left; 
        width: 100px;
       }
  a{text-decoration: none;}
  a:hover{  display: block;}
   #menu ul li a span{display: none;}
  #menu ul li:hover  a span{display: block;}
  #menu ul li:hover {margin-top: -40px;}/* 向上移动40px*/
  </style>
</head>
<body>
   <div id="menu">
      <ul>
          <li><a href="#">新闻1<span>news1</span></a></li>
          <li><a href="#">新闻2<span>news2</span></a></li>
          <li><a href="#">新闻3<span>news3</span></a></li>
      </ul>
   </div>
</body>
</html>