《Web前端开发项目教程》网页中列表的应用-使用列表制作复杂导航

项目06

网页中列表的应用任务6-2使用列表制作复杂导航任务6-2使用列表制作复杂导航

知识点掌握列表的嵌套及其样式技能点学会使用列表制作多级导航菜单能够熟练设置多级列表的样式一、列表的嵌套在使用列表时，列表项中也有可能包含若干子列表项。无序列表和有序列表不仅可以自身嵌套，而且可以互相嵌套。一、列表的嵌套【例6-2-1】列表的嵌套<ul>

<li>手机

<ol>

<li>华为手机</li>

<li>小米手机</li>

<li>荣耀手机</li>

<li>魅族手机</li>

</ol>

</li>

<li>手机配件

<ul>

<li>手机壳</li>

<li>耳机</li>

<li>充电宝</li>

<li>手机电池</li>

</ul>

</li>

<li>影音娱乐</li>

<li>通信服务</li>

<li>数码配件</li></ul>二、制作多级导航菜单——水平二级导航菜单制作二级导航菜单通常是鼠标触发主菜单时，在主菜单下方或者左右两侧显示二级菜单，鼠标移入二级菜单点击可以打开相应的链接。二级子菜单出现的位置紧随一级菜单。二、制作多级导航菜单——水平二级导航菜单制作<ulclass="dropdown"><li>下拉菜单

<olclass="dropdown-content">

<li><ahref="#">菜单1</a></li>

<li><ahref="#">菜单2</a></li>

<li><ahref="#">菜单3</a></li>

</ol></li></ul>CSS样式部分（1）进行初始化的设置，将文档中所有元素的margin和padding设为0；（2）去掉所有列表项前面的图标；（3）分别对主菜单和子菜单项的样式进行设置。（4）鼠标移入li时改变子元素a的背景色；

（5）由于子菜单的位置始终跟随主菜单，所以可以使用定位。将参照物主菜单设置成相对定位，下拉菜单容器设置成绝对定位，并且始终在主菜单项的下方。（6）设置二级下拉菜单隐藏，在鼠标划过主菜单的时候，下拉菜单显示。二、制作多级导航菜单——水平二级导航菜单制作<ulclass="dropdown"><li>下拉菜单

<olclass="dropdown-content">

<li><ahref="#">菜单1</a></li>

<li><ahref="#">菜单2</a></li>

<li><ahref="#">菜单3</a></li>

</ol></li></ul>CSS样式部分（1）进行初始化的设置，将文档中所有元素的margin和padding设为0；（2）去掉所有列表项前面的图标；（3）分别对主菜单和子菜单项的样式进行设置。（4）鼠标移入li时改变子元素a的背景色；

（5）由于子菜单的位置始终跟随主菜单，所以可以使用定位。将参照物主菜单设置成相对定位，下拉菜单容器设置成绝对定位，并且始终在主菜单项的下方。（6）设置二级下拉菜单隐藏，在鼠标划过主菜单的时候，下拉菜单显示。*{ padding:0;margin:0; }.dropdown,.dropdown-content{list-style-type:none;}二、制作多级导航菜单——水平二级导航菜单制作<ulclass="dropdown"><li>下拉菜单

<olclass="dropdown-content">

<li><ahref="#">菜单1</a></li>

<li><ahref="#">菜单2</a></li>

<li><ahref="#">菜单3</a></li>

</ol></li></ul>CSS样式部分（1）进行初始化的设置，将文档中所有元素的margin和padding设为0；（2）去掉所有列表项前面的图标；（3）分别对主菜单和子菜单项的样式进行设置。（4）鼠标移入li时改变子元素a的背景色；

（5）由于子菜单的位置始终跟随主菜单，所以可以使用定位。将参照物主菜单设置成相对定位，下拉菜单容器设置成绝对定位，并且始终在主菜单项的下方。（6）设置二级下拉菜单隐藏，在鼠标划过主菜单的时候，下拉菜单显示。由于两级菜单的标记均为li，为了方便定位到它们，可以充分利用子元素选择器“>”。.dropdown>li { width:100px; height:40px; border:2pxsolid; border-radius:8px;line-height:40px; text-align:center; color:#000; font-size:16px;cursor:pointer;/*手型光标*/ }二、制作多级导航菜单——水平二级导航菜单制作<ulclass="dropdown"><li>下拉菜单

<olclass="dropdown-content">

<li><ahref="#">菜单1</a></li>

<li><ahref="#">菜单2</a></li>

<li><ahref="#">菜单3</a></li>

</ol></li></ul>CSS样式部分（1）进行初始化的设置，将文档中所有元素的margin和padding设为0；（2）去掉所有列表项前面的图标；（3）分别对主菜单和子菜单项的样式进行设置。（4）鼠标移入li时改变子元素a的背景色；

（5）由于子菜单的位置始终跟随主菜单，所以可以使用定位。将参照物主菜单设置成相对定位，下拉菜单容器设置成绝对定位，并且始终在主菜单项的下方。（6）设置二级下拉菜单隐藏，在鼠标划过主菜单的时候，下拉菜单显示。.dropdown-contenta {color:#fff;display:block;width:100px;text-align:center;line-height:30px;text-decoration:none;background:#008; }二、制作多级导航菜单——水平二级导航菜单制作<ulclass="dropdown"><li>下拉菜单

<olclass="dropdown-content">

<li><ahref="#">菜单1</a></li>

<li><ahref="#">菜单2</a></li>

<li><ahref="#">菜单3</a></li>

</ol></li></ul>CSS样式部分（1）进行初始化的设置，将文档中所有元素的margin和padding设为0；（2）去掉所有列表项前面的图标；（3）分别对主菜单和子菜单项的样式进行设置。（4）鼠标移入li时改变子元素a的背景色；

（5）由于子菜单的位置始终跟随主菜单，所以可以使用定位。将参照物主菜单设置成相对定位，下拉菜单容器设置成绝对定位，并且始终在主菜单项的下方。（6）设置二级下拉菜单隐藏，在鼠标划过主菜单的时候，下拉菜单显示。.dropdown-contenta:hover{background-color:#00f;}二、制作多级导航菜单——水平二级导航菜单制作<ulclass="dropdown"><li>下拉菜单

<olclass="dropdown-content">

<li><ahref="#">菜单1</a></li>

<li><ahref="#">菜单2</a></li>

<li><ahref="#">菜单3</a></li>

</ol></li></ul>CSS样式部分（1）进行初始化的设置，将文档中所有元素的margin和padding设为0；（2）去掉所有列表项前面的图标；（3）分别对主菜单和子菜单项的样式进行设置。（4）鼠标移入li时改变子元素a的背景色；

（5）由于子菜单的位置始终跟随主菜单，所以可以使用定位。将参照物主菜单设置成相对定位，下拉菜单容器设置成绝对定位，并且始终在主菜单项的下方。（6）设置二级下拉菜单隐藏，在鼠标划过主菜单的时候，下拉菜单显示。由于子菜单的位置始终跟随主菜单，所以可以使用定位。将参照物主菜单设置成相对定位，下拉菜单容器设置成绝对定位，并且始终在主菜单项的下方。.dropdown>li

{ ……

position:relative;

}.dropdown-content

{

position:absolute;

left:5px;

top:40px;

}二、制作多级导航菜单——水平二级导航菜单制作<ulclass="dropdown"><li>下拉菜单

<olclass="dropdown-content">

<li><ahref="#">菜单1</a></li>

<li><ahref="#">菜单2</a></li>

<li><ahref="#">菜单3</a></li>

</ol></li></ul>CSS样式部分（1）进行初始化的设置，将文档中所有元素的margin和padding设为0；（2）去掉所有列表项前面的图标；（3）分别对主菜单和子菜单项的样式进行设置。（4）鼠标移入li时改变子元素a的背景色；

（5）由于子菜单的位置始终跟随主菜单，所以可以使用定位。将参照物主菜单设置成相对定位，下拉菜单容器设置成绝对定位，并且始终在主菜单项的下方。（6）设置二级下拉菜单隐藏，在鼠标划过主菜单的时候，下拉菜单显示。.dropdown-content{display:none; }/*初始时下拉菜单隐藏*/.dropdown>li:hover.dropdown-content{display:block; }二、制作多级导航菜单——竖直伸缩型二级菜单制作竖直伸缩型二级菜单是当鼠标触发主菜单时，相应的子菜单竖直显示在其下方，挤占其他主菜单项的位置。二、制作多级导航菜单——竖直伸缩型二级菜单制作首先，写好body中的列表元素。<ulclass="dropdown"><li>menu1

<olclass="dropdown-content">

<li><ahref="#">menu1-1</a></li>

<li><ahref="#">menu1-2</a></li>

<li><ahref="#">menu1-3</a></li>

</ol></li><li>menu2</li><li>menu3</li></ul>然后，进行CSS样式的设置（1）初始化设置，将ul、ol等元素的默认padding、margin都置0。（2）设置所有列表项前面的图标类型为none。（3）设置第一级列表项的外观样式。（4）设置二级菜单所有的a为块级元素，并对其文字格式进行设置，包括text-decoration、font-size、color、text-align、line-height等，和上例基本类似。（5）设置二级子菜单的位置。二级子菜单的出现要挤占后面一级菜单的位置，所以要在文档流中占据一定的高度，因此二级菜单容器要设置相对定位relative。（6）正常情况下，二级菜单隐藏，当鼠标滑过主菜单时，二级菜单才显示。（7）设置鼠标滑动到二级菜单时子菜单项背景色的变换。二、制作多级导航菜单——竖直伸缩型二级菜单制作首先，写好body中的列表元素。<ulclass="dropdown"><li>menu1

<olclass="dropdown-content">

<li><ahref="#">menu1-1</a></li>

<li><ahref="#">menu1-2</a></li>

<li><ahref="#">menu1-3</a></li>

</ol></li><li>menu2</li><li>menu3</li></ul>然后，进行CSS样式的设置（1）初始化设置，将ul、ol等元素的默认padding、margin都置0。（2）设置所有列表项前面的图标类型为none。（3）设置第一级列表项的外观样式。（4）设置二级菜单所有的a为块级元素，并对其文字格式进行设置，包括text-decoration、font-size、color、text-align、line-height等，和上例基本类似。（5）设置二级子菜单的位置。二级子菜单的出现要挤占后面一级菜单的位置，所以要在文档流中占据一定的高度，因此二级菜单容器要设置相对定位relative。（6）正常情况下，二级菜单隐藏，当鼠标滑过主菜单时，二级菜单才显示。（7）设置鼠标滑动到二级菜单时子菜单项背景色的变换。*{ padding:0;margin:0; }.dropdown,.dropdown-content{list-style-type:none;}二、制作多级导航菜单——竖直伸缩型二级菜单制作首先，写好body中的列表元素。<ulclass="dropdown"><li>menu1

<olclass="dropdown-content">

<li><ahref="#">menu1-1</a></li>

<li><ahref="#">menu1-2</a></li>

<li><ahref="#">menu1-3</a></li>

</ol></li><li>menu2</li><li>menu3</li></ul>然后，进行CSS样式的设置（1）初始化设置，将ul、ol等元素的默认padding、margin都置0。（2）设置所有列表项前面的图标类型为none。（3）设置第一级列表项的外观样式。（4）设置二级菜单所有的a为块级元素，并对其文字格式进行设置，包括text-decoration、font-size、color、text-align、line-height等，和上例基本类似。（5）设置二级子菜单的位置。二级子菜单的出现要挤占后面一级菜单的位置，所以要在文档流中占据一定的高度，因此二级菜单容器要设置相对定位relative。（6）正常情况下，二级菜单隐藏，当鼠标滑过主菜单时，二级菜单才显示。（7）设置鼠标滑动到二级菜单时子菜单项背景色的变换。.dropdown>li{

width:100px;

background:#000088;

border:1pxsolid#fa0;

color:#fff;

text-align:center;

padding:8px0;

cursor:pointer;

}二、制作多级导航菜单——竖直伸缩型二级菜单制作首先，写好body中的列表元素。<ulclass="dropdown"><li>menu1

<olclass="dropdown-content">

<li><ahref="#">menu1-1</a></li>

<li><ahref="#">menu1-2</a></li>

<li><ahref="#">menu1-3</a></li>

</ol></li><li>menu2</li><li>menu3</li></ul>然后，进行CSS样式的设置（1）初始化设置，将ul、ol等元素的默认padding、margin都置0。（2）设置所有列表项前面的图标类型为none。（3）设置第一级列表项的外观样式。（4）设置二级菜单所有的a为块级元素，并对其文字格式进行设置，包括text-decoration、font-size、color、text-align、line-height等，和上例基本类似。（5）设置二级子菜单的位置。二级子菜单的出现要挤占后面一级菜单的位置，所以要在文档流中占据一定的高度，因此二级菜单容器要设置相对定位relative。（6）正常情况下，二级菜单隐藏，当鼠标滑过主菜单时，二级菜单才显示。（7）设置鼠标滑动到二级菜单时子菜单项背景色的变换。.dropdown-contenta{

display:block;

width:100px;

background:#FA0;

color:#00f;

height:30px;

text-align:center;

line-height:30px;

text-decoration:none;

border-bottom:1pxsolid; }二、制作多级导航菜单——竖直伸缩型二级菜单制作首先，写好body中的列表元素。<ulclass="dropdown"><li>menu1

<olclass="dropdown-content">

<li><ahref="#">menu1-1</a></li>

<li><ahref="#">menu1-2</a></li>

<li><ahref="#">menu1-3</a></li>

</ol></li><li>menu2</li><li>menu3</li></ul>然后，进行CSS样式的设置（1）初始化设置，将ul、ol等元素的默认padding、margin都置0。（2）设置所有列表项前面的图标类型为none。（3）设置第一级列表项的外观样式。（4）设置二级菜单所有的a为块级元素，并对其文字格式进行设置，包括text-decoration、font-size、color、text-align、line-height等，和上例基本类似。（5）设置二级子菜单的位置。二级子菜单的出现要挤占后面一级菜单的位置，所以要在文档流中占据一定的高度，因此二级菜单容器要设置相对定位relative。（6）正常情况下，二级菜单隐藏，当鼠标滑过主菜单时，二级菜单才显示。（7）设置鼠标滑动到二级菜单时子菜单项背景色的变换。二级子菜单的出现要挤占后面一级菜单的位置，所以要在文档流中占据一定的高度，因此二级菜单容器要设置相对定位relative。为美观起见，增加一点top偏移量。

.dropdown-content{

position:relative;

top:8px;

left:0;

}二、制作多级导航菜单——竖直伸缩型二级菜单制作首先，写好body中的列表元素。