在网页设计中，导航菜单随处可见，大多都是通过设置CSS列表样式创建的，本例以介绍网页中常见的导航菜单制作方法，来说明列表网页菜单在网页设计中的应用。
【操作步骤】第1步，启动Dreamweaver，新建一个网页，保存为index.html。
第2步，构建网页结构，在<body>标签中输入以下内容：
<dl>
<dt> <a href="#a">娱乐健身</a> <a href="#b">餐饮服务</a> <a href="#c">购物指南</a> </dt>
<dd>
<ul id="a">
<li><a href="#">博纳悠唐国际影城博纳悠唐国际影城</a></li>
<li><a href="#">家富富侨足疗（右安门店）家富富侨足疗（右安门店）</a></li>
<li><a href="#">朱国凡良子（长虹桥店）朱国凡良子（长虹桥店）</a></li>
<li><a href="#">昆泰大酒店游泳馆昆泰大酒店游泳馆</a></li>
<li><a href="#">奥力健身俱乐部（亚运村旗舰店）</a></li>
<li><a href="#">炫力骄阳健身（玺萌丽苑店）炫力骄阳健身（玺萌丽苑店）</a></li>
</ul>
<ul id="b">
<li><a href="#">家富富侨足疗（右安门店）家富富侨足疗（右安门店）</a></li>
<li><a href="#">中秋宴预定火爆食材涨幅异常</a></li>
<li><a href="#">餐饮业升级转型：要人才资源也要文化</a></li>
<li><a href="#">79元的“总统套餐”火了79元的“总统套餐”火了</a></li>
<li><a href="#">湖南餐饮大佬抢滩快餐业湖南餐饮大佬抢滩快餐业</a></li>
<li><a href="#">第四届云南火锅美食节开幕第四届云南火锅美食节开幕</a></li>
</ul>
<ul id="c">
<li><a href="#">网上购物，凡客诚品促销中！优质低价，超值网购!</a></li>
<li><a href="#">蓝色港湾购物蓝色港湾购物</a></li>
<li><a href="#">走秀网-全球品牌网络旗舰店：正品，支持货到付款 </a></li>
<li><a href="#">昆泰大酒店游泳馆昆泰大酒店游泳馆</a></li>
<li><a href="#">英国出现少女购物狂掀起网络炫富潮</a></li>
<li><a href="#">炫力骄阳健身（玺萌丽苑店）炫力骄阳健身（玺萌丽苑店）</a></li>
</ul>
</dd>
</dl>
在上面的代码中，首先用<dl>标签创建了一个定义列表，在<dt>标签中，定义3个项目，分别是“娱乐健身”、“餐饮服务”和“购物指南”，在<dd>标签中包含了3个<ul>标签，用于创建<ul>无序列表，分别对应于上面的3个项目“娱乐健身”、“餐饮服务”和“购物指南”的内容。此时的显示没有任何CSS样式设置。
第3步，在<head>标签内添加<styletype="text/css">标签，定义一个内部样式表，然后输入下面样式，规划整个页面的基本显示属性：字体颜色、背景颜色等。
dl { /*定义列表样式*/
position:absolute; /*定义元素的绝对定位*/
width:460px;
height:170px;
border:10px solid #eee; /*定义元素的边框样式*/ }dt { /*定义<dt>标签（菜单）的样式*/
position:absolute; /*定义元素的绝对定位，以父元素的原点为原点*/
right:1px; /*右边框离父标签1px*/}
dd { /*定义<dd>标签（菜单内容）样式*/
margin:0;
width:460px;
height:170px;
overflow:hidden; /*溢出隐藏*/ }
在以上代码中，定义了<dl>列表的样式。在<dd>样式中，在网页设计中，overflow:hidden语句的作用是将超出其设置的高度和宽度部分隐藏起来，如果缺少这句，那么3个<ul>标签中的内容将全部显示出来。
第4步，设置菜单项的链接样式。
dt a { /*dt（菜单项）的链接样式*/
display:block; /*设置为块级元素*/
margin:1px; /*四周补白为1px，这样设置可使菜单项有1px间隔*/
width:80px; /*菜单项的宽度*/
height:56px; /*菜单项的高度*/ text-align:center;
font:700 12px/55px "宋体"; /*用font属性综合设置字体样式*/
color:#fff; /*字体颜色*/
text-decoration:none; /*不显示项目符号*/
background:#666; /*背景颜色*/}
dt a:hover { /*鼠标悬停时菜单项的样式*/
background:orange; /*鼠标悬停时背景色改为橙色*/}
在以上代码中，设置了菜单项<dt>中的链接样式，其中display:block将本是行内元素的<a>标签改为了块元素，通过该语句，当鼠标进入到该块的任何部分时都会被激活，而不仅仅是在文字上方时才被激活，也就是鼠标进入菜单区域时，变为橙色。
第5步，设置<ul>列表和<li>标签的样式。
ul { /*设置列表ul样式*/
margin:0; /*使列表内容紧靠父标签*/
padding:0;
width:460px;
height:170px;
list-style-type:none; /*不显示列表项目*/
background:#fff; /*背景颜色*/}li { /* <li>标签的样式*/
width:405px; /*<li>标签的宽度*/
height:27px;
padding-left:20px; /*文字左侧距离边框有20px距离*/
font:12px/27px "宋体"; /*用font属性综合设置字体样式*/
}在以上代码中，定义了<ul>和<li>标签的样式，其中有一个语句读者可能有些陌生：font:12px/27px"宋体"，在这里12px/27px表示字体大小为12px，行间距为27px，相当于：font-size:12px;line-height: 27px。此时网站导航完成设置。
当前文章标题：网页设计中的导航列表
当前URL：http://www.lyjtt.cn/news/wzzz/3092.html
上一篇：在网页设计中设计新闻列表
下一篇：如何设计多级菜单列表
