导航栏使用<ul>,<li>标签导航栏的内容装在一个盒子里，使用<dl><dd>标签，在CSS中给<li>标签添加posation：relative，给装导航栏内容的盒子添加posation：absolute；目的是为了使各个导航栏下的盒子与所对应的导航栏对齐。然后让div隐藏（隐藏有四种方式：display：none；visibility：hidden；overflow：hidden；background：transparent具体区别会发布在另一篇文章），此时使用 visibility：hidden。
完成整个架构之后，在鼠标覆盖<li>标签时使下方的<div>visibility：hidden变为visibility：visible。然后添加过渡max-height: 450px ; transition: max-height 1s;max-height是不同长度盒子中最大长度，此时就可以实现导航栏的下拉框可以正好适应自身内容的长度。
示例代码：
HTML
<div class="nav-d"><div class="nav-f"><ul id="nav-s"><li class="nav"><a href="">首页</a></li><li class="nav"><a href="">关于我们</a><div class="subNav"><dl><dd><a href="">概况</a></dd><dd><a href="">组织体系</a></dd><dd><a href="">委员会</a></dd><dd><a href="">院长寄语</a></dd><dd><a href="">学院架构</a></dd></dl></div></li><li class="nav"><a href="">师资队伍</a><div class="subNav"><dl><dd><a href="">院士</a></dd><dd><a href="">杰出人才</a></dd><dd><a href="">荣誉学衔</a></dd><dd><a href="">教研系列</a></dd><dd><a href="">研究系列</a></dd><dd><a href="">教学系列</a></dd><dd><a href="">博士后</a></dd><dd><a href="">教辅行政</a></dd><dd><a href="">光荣退休</a></dd></dl></div></li><li class="nav"><a href="">新闻公告</a><div class="subNav"><dl><dd><a href="">新闻动态</a></dd><dd><a href="">讲座信息</a></dd><dd><a href="">教学通知</a></dd><dd><a href="">科研通知</a></dd><dd><a href="">通知公告</a></dd></dl></div></li><li class="nav"><a href="">科学研究</a><div class="subNav"><dl><dd><a href="">研究领域</a></dd><dd><a href="">研究机构</a></dd><dd><a href="">科研基地</a></dd><dd><a href="">科研项目</a></dd><dd><a href="">关联机构</a></dd></dl></div></li><li class="nav"><a href="">人才培养</a><div class="subNav"><dl><dd><a href="">本科生教育</a></dd><dd><a href="">研究生教育</a></dd></dl></div></li><li class="nav"><a href="">招生信息</a><div class="subNav"><dl><dd><a href="">本科生</a></dd><dd><a href="">研究生</a></dd><dd><a href="">Internation <br />Students</a></dd><dd><a href="">招生导师</a></dd><dd><a href="">介绍视频</a></dd></dl></div></li><li class="nav"><a href="">招纳贤士</a><div class="subNav"><dl><dd><a href="">教师</a></dd><dd><a href="">博士后</a></dd><dd><a href="">专职研究人员</a></dd><dd><a href="">教学科研辅助</a></dd></dl></div></li><li class="nav"><a href="">学生工作</a><div class="subNav"><dl><dd><a href="">党团建设</a></dd><dd><a href="">学生动态</a></dd><dd><a href="">学工通知</a></dd></dl></div></li><li class="nav"><a href="">国际化</a><div class="subNav"><dl><dd><a href="">实习生项目</a></dd><dd><a href="">暑期夏令营</a></dd><dd><a href="">留学生项目</a></dd></dl></div></li></ul></div></div>
CSS部分：
.nav-d {width: 100%;height: 45px;line-height: 45px;background-color:rgb(142, 6, 6);position:relative;}.nav-f {background-color: rgb(134, 21, 21);width: 1263px;height: 45px;line-height: 45px;margin: 0 auto;padding: 0;position: relative;}.nav-f li.nav {display: inline;float: left;width: 121px;position: relative;text-align: center;}dd {display: block;padding: 0;}.nav a {font-size: 1em;display: block;color: rgb(212, 224, 182);}a {outline: none;text-align: none;}.subNav {visibility: hidden;background-color: rgb(134, 21, 21);max-height: 0;position:absolute;width: 121px;z-index: 99;}li:hover > div {visibility: visible;max-height: 450px;transition: max-height 1s;overflow: hidden;}.subNav dd:hover > a {padding: auto;background-color: rgb(177, 13, 13);color: white;}
实例效果如图
