「这是我参与2022首次更文挑战的第22天，活动详情查看：2022首次更文挑战」
大家好，我是洋洋哥。今天给大家带来今天的每日一题——三级菜单。
题目要求
用CSS和HTML代码编写如下图所示的一个三级菜单
建议用时：15-20分钟
难度：中等
知识点考察
这道题主要考察三级菜单的建立。三级菜单的本质就是在考察CSS网页布局，是DIV+CSS布局的应用。
问题分析
第一，做这种类似的题目一定要记得一句话，结构与样式相分离，可以先看结构也可以先看样式，就是不要一起看。
第二，我们先来看结构，因为结构一般相对样式简单一点。不就是无序列表的嵌套吗，在有下一层的li中在嵌套一个ul就行了。
第三，看样式。首先，无序列表的符号样式是没有的，所以list-style设置为none。其次，我们把鼠标放到文字(这些文字都是超链接)上时会变颜色，所以需要用到a:hover。最后，就是关于菜单的位置问题了，这个在之前的文章讲述过，类似于二级菜单，就不多赘述了。
相关知识点复习
超链接状态和样式
link：选择未被访问的链接，并设置其样式；即：定义正常（未被访问）链接的样式。
:hover：选择鼠标指针浮动在其上的元素，并设置其样式；即：定义鼠标悬浮在链接上时的样式。
:active：选择活动链接，并设置其样式；即：定义鼠标点击链接时的样式。
:visited：选择已访问的链接，并设置其样式；即：定义已访问过链接的样式。
CSS网页布局
之前有一篇文章讲过CSS网页布局看看就好，内容有点多就不多赘述了，
代码实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三级菜单</title>
<style>
#menu {
width:100px;
border:1px solid #999;
}
#menu ul {
margin:0px;
padding:0px;
list-style: none;
}
a {
display:block;
font-size:12px;
color:#fff;
text-decoration:none;
}
a:hover{
color:#f00;
font-size:14px;
}
#menu ul li {
background:#06c;
height:26px;
line-height:26px;
text-align:center;
border-bottom:1px solid #999;
position:relative;
}
#menu ul li ul{
display:none;
top:0px;
width:130px;
border:1px solid #ccc;
border-bottom:none;
position:absolute;
left:100px;
}
#menu ul li ul li ul{
display:none;
top:0px;
width:130px;
border:1px solid #ccc;
border-bottom:none;
position:absolute;
left:130px;
}
#menu ul li:hover>ul{
display:block;
}
#menu ul li ul li:hover ul{
display:block;
}
#menu ul li:hover ul li a{
display:block;
}
#menu ul li ul li:hover ul li a{
display:block;
}
</style>
</head>
<div id="menu">
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a>
<ul>
<li><a href="#">selector</a></li>
<li><a href="#">use css</a>
<ul>
<li><a href="#">first</a></li>
<li><a href="#">second</a></li>
</ul>
</li>
<li><a href="#">formatting</a></li>
<li><a href="#">layout</a></li>
</ul>
</li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">XML</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Ajax</a></li>
</ul>
</div>
<body>
</body>
</html>
总结和建议
三级菜单重点就是在于网页布局和位置的问题，其实一般来说你学会了二级菜单差不多就会三级菜单了，这个比较重要也有点难度，需要注意。
