如何设置二级标题：当鼠标放到一级标题上二级标题才会显示出来

如何设置导航栏中的二级标题
在制作网页并进行布局的时候导航栏是不可缺少的，那么如何设计导航栏的一级标题和二级标题呢？下面这篇文章将详细为您介绍。

以成都大学教务系统的导航栏为例来实现二级菜单的制作：
1.这是我们要制作的一级导航栏：

2.这是我们要制作的二级导航栏：
下面是一级菜单和二级菜单的准备代码：

 <ul id="menu">
               <li>
                   <a href="css和div布局.html">本站首页a>
                li>
               <li>
                   <a href="http://jw.cdu.edu.cn/others/organs.aspx">机构设置a>
                li>
               <li>
                   <a href=""> 管理文件a>
                   <ul>
                       <li><a href="http://jw.cdu.edu.cn/Infors/Business.aspx?classID=40">教学建设a>li>
                       <li><a href="http://jw.cdu.edu.cn/Infors/Business.aspx?classID=19">综合管理a>li>
                       <li><a href="http://jw.cdu.edu.cn/Infors/Business.aspx?classID=37">质量评估a>li>
                       <li><a href="http://jw.cdu.edu.cn/Infors/Business.aspx?classID=35">实践教学a>li>
                       <li><a href="http://jw.cdu.edu.cn/Infors/Business.aspx?classID=36">招生考试a>li>
                       <li><a href="http://jw.cdu.edu.cn/Infors/Business.aspx?classID=31">教学运行a>li>
                   ul>
                li>
                <li>
                   <a href=""> 办事流程a>
                  <ul>
                    <li><a href="http://jw.cdu.edu.cn/Infors/Business.aspx?classID=11">教学建设a>li>
                    <li><a href="http://jw.cdu.edu.cn/Infors/Business.aspx?classID=43"> 综合管理a>li>
                    <li><a href="http://jw.cdu.edu.cn/Infors/Business.aspx?classID=42">质量评估a>li>
                    <li><a href="http://jw.cdu.edu.cn/Infors/Business.aspx?classID=20">实践教学a>li>
                    <li><a href="http://jw.cdu.edu.cn/Infors/Business.aspx?classID=17">招生考试a>li>
                  ul>
                li>
                <li>
                    <a href="">资料下载a>
                    <ul>
                        <li><a href="http://jw.cdu.edu.cn/Infors/Business.aspx?classID=1">常用表格a>li>
                        <li><a href="http://jw.cdu.edu.cn/Infors/Business.aspx?classID=2">常用工具a>li>
                        <li><a href="http://jw.cdu.edu.cn/Infors/Business.aspx?classID=45">教学大纲a>li>
                    ul>
                li>
                <li>
                    <a href="http://zhaosheng.cdu.edu.cn/">招生咨询a>
                li>
                <li>
                    <a href="http://kcxt.cdu.edu.cn/eol/homepage/common/index_jpk.jsp">本科教学a>
                li>
                <li>
                    <a href="http://jw.cdu.edu.cn/Infors/Business.aspx?classID=27">学科竞赛a>
                li>
           ul>

然后我们来设置相应的CSS样式:

             a{
     /*将所有超链接的下划线去掉*/
                text-decoration: none;
            }
            a:link{
     /*统一设置所有超链接未被点击是的颜色*/
                color:#050000;
            }
            #menu{
       /*设置菜单栏相同的属性*/
                height:32px;
                font-family: Arial, Helvetica, sans-serif;
                margin:0px;
                padding:0px;
            }
            #menu>li{
     /*设置一级菜单浮动，让所有一级菜单显示在一行上 */
                float:left;
                width: 150px;
            }
            #menu li,#menu ul{
     /* 去掉一级菜单和二级菜单的项目符号：即消除maring 和padding */
                margin:0px;
                padding:0px;
                list-style-type: none;
            }
              #menu>li>a{
     /* 设置一级菜单项 */
                display: block;
                font-size:20px;
                background-color:hsl(9, 83%, 31%);
                color:azure;
                padding:8px 20px;
                text-align: center;
                margin:1px;
            }
            #menu>li>a:hover{
     /* 一级菜单鼠标放上去的变化 */
                background-color: tomato;
                color:white;
            }
             #menu li ul li a{
      /* 二级菜单 */
                font-size:16px;/*通常二级菜单字体要比一级菜单小一些*/
                background-color: rgb(148, 3, 11);
                color:aliceblue;
                margin-right: 1px;
                padding:5px;
                display:block;
            }
            #menu ul{
     /* 隐藏二级菜单！！！很核心的一步操作 */
                display: none;/*将二级菜单的disp属性设置为none，使二级菜单隐藏起来，很重要的一步操作！！！*/
                width: 149px;
                position:absolute;  /*脱离标准流，后面的盒子当它不存在，不会将下面的内容挤开*/
            }
            #menu>li:hover ul{
     /*显示二级子菜单  */
                 display: block;
            }
            /* 鼠标放到二级菜单上的变化效果 */
            #menu li ul a:hover{
     
                background-color: #c90707;
            }

按照上面来设计就可得到隐藏二级菜单和鼠标放上去才显示二级菜单的效果。在这里特别要提醒二级菜单的隐藏和显示操作的属性设置一定要理解是怎么实现的。

最后来总结一下：1.重点归纳：制作二级菜单的核心主要是要将二级菜单进行隐藏和显示，隐藏时要用到display属性，并将其值设置为none，另外一个重点便是使用position属性，将其属性值设置为absolute，让其脱离标准流，这样才不会在显示二级菜单时导致其他盒子被挤到下方去；显示操作需注意是，不是在#menu>li:hover{}下显示，这样是不会显示二级菜单的，还要在后面加上二级菜单 ul 也就是说鼠标放上去控制的是二级菜单的显示即 #menu>li:hover ul{}。2.学习心得：刚开始学习制作二级菜单的时候在显示二级菜单的时候没想到要控制二级菜单显示的操作，这应该是刚开始学习制作菜单栏的一个通病，希望这次在CSDN总结发出来可以帮组到其他刚开始的人理解，同时想要学好菜单栏的制作对display的几个属性值和position定位的属性值要理解透彻，这样才不会在制作的时候显得很吃力。