下拉菜单

最新推荐文章于 2022-10-28 16:01:20 发布

七彩猫猫虫

最新推荐文章于 2022-10-28 16:01:20 发布

阅读量170

点赞数

分类专栏：自己动手丰衣足食

本文链接：https://blog.csdn.net/SDAW_1/article/details/104197902

版权

自己动手丰衣足食专栏收录该内容

14 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" type="text/css" href="03.css">
</head>
<body>

  <nav>
    <ul class="c">
      <li class="f"><a href="#">学院首页</a>
          <ul class="w">
            <li><a href="#">新闻动态</a> </li>
            <li><a href="#">通知公告</a> </li>
            <li><a href="#">信息公开</a> </li>
          </ul>
      </li>
      <li class="f"><a href="#">学院简介</a>
        <ul class="w">
          <li><a href="#">学院简介</a> </li>
          <li><a href="#">名师风采</a> </li>
          <li><a href="#">专业设置</a> </li>
        </ul>
      </li>
      <li class="f"><a href="#">科研工作</a>
        <ul class="w">
          <li><a href="#">1</a> </li>
          <li><a href="#">2</a> </li>
          <li><a href="#">3</a> </li>
        </ul>
      </li>
      <li class="f"><a href="#">党团工作</a>
        <ul class="w">
          <li><a href="#">党团动态</a> </li>
          <li><a href="#">争先创优</a> </li>
        </ul>
      </li>
      <li class="f"><a href="#">学生管理</a>
        <ul class="w">
          <li><a href="#">安全管理</a> </li>
          <li><a href="#">学风建设</a> </li>
          <li><a href="#">贫困资助</a> </li>
        </ul>
      </li>
      <li class="f"><a href="#">招生就业</a>
        <ul class="w">
          <li><a href="#">招生信息</a> </li>
          <li><a href="#">就业咨询</a> </li>
        </ul>
      </li>
      <li class="f"><a href="#">学院荣誉</a>
        <ul class="w">
          <li><a href="#">1</a> </li>
          <li><a href="#">2</a> </li>
          <li><a href="#">3</a> </li>
        </ul>
      </li>
      <li class="f"><a href="#">资料下载</a>
        <ul class="w">
          <li><a href="#">1</a> </li>
          <li><a href="#">2</a> </li>
          <li><a href="#">3</a> </li>
        </ul>
      </li>
      <li class="f"><a href="03.html">学校主页</a>
        <ul class="w">
          <li><a href="#">1</a> </li>
          <li><a href="#">2</a> </li>
          <li><a href="#">3</a> </li>
        </ul>
      </li>
      </ul>
  </nav>

      <div class="lbt">

      </div>
</body>
</html>

CSS文件

*{
  margin:0;
  padding: 0;
  list-style: none;
}


nav{
   width:100%;
  height:50px;
  font-family:'Montserrat',sans-serif ;
  background-color: #2f8c7f;

}
nav .c{
  list-style: none;
  width: 1062px;
  margin:0 auto;
}

nav ul li{
  float:left;
  width:118px;
  height: 50px;
  text-align: center;

  font-size:16px;
}

nav ul li a{
  text-decoration: none;
  display:block;
  text-align: center;
  line-height: 50px;
  color:white;
}

nav ul li ul li{
  background-color:#575757;
  opacity:0.8;
  height:0;
  overflow: hidden;
  transition:   0.5s;
  font-size:14px;
}
nav ul li:hover ul li{

  height: 50px;

}

nav ul li ul li:hover{
  background-color: #2f8c7f;
}

七彩猫猫虫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
下拉菜单

效果图html文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="03.css">&l...
复制链接

扫一扫