css 三级 导航条 |图片有走动 css

html:
<ul class="nav">
<li>菜单1
<ul>
<li>子菜单1.1</li>
<li>子菜单1.2</li>
<li>子菜单1.3
<ul>
<li>子菜单1.3.1</li>
<li>子菜单1.3.2</li>
<li>子菜单1.3.3</li>
</ul>
</li>
</ul>
</li>
<li>菜单2</li>
<li>菜单3</li>
</ul>

首先，大家需要对HTML结构进行分析，其中包含一个ul列表和多个li项，ul列表中还包含ul子列表。大家需要对它的样式进行设置，以便在网页上显示出漂亮的效果。

css:
.nav{
list-style:none;
padding:0;
margin:0;
}
.nav li{
float:left;
position:relative;
}
.nav ul{
display:none;
position:absolute;
top:100%;
left:0;
width:200px;
}
.nav ul ul{
top:0;
left:100%;
}
.nav li:hover > ul{
display:block;
}

在样式中，大家首先对ul列表进行了一些基本的设置，去除了标记样式，以及边距、填充等样式。接下来对li项设置了float浮动属性以及相对定位，为了下一步设置ul子列表的绝对定位提供依据。接着对ul子列表进行了一些设置，包括不显示，相对于li项进行绝对定位，以及相对于li项的底部开始显示。最后设置了子列表的宽度，并且将其相对于父列表进行定位，右侧相邻。而对于子列表的子列表（第三级导航），则需要将顶部移动到父子列表下方，从而构造出三级导航的效果。在样式的最后，通过鼠标悬浮到li项上的触发事件，来使子列表显示出来，从而完美呈现三级导航效果。

通过以上的样式设置，大家成功地创建了一个漂亮的三级导航列表，能够方便快捷地为用户提供浏览方式，从而获得更优秀的用户体验。