ul li 制作导航菜单
效果图：
代码段：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="daohang.aspx.cs" Inherits="daohang" %><!DOCTYPE html><html xmlns="/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>导航栏</title><style type="text/css">*{ margin:0;padding:0; } body{background-color:darkgrey; }#Logo{/*div*/width:980px;height:45px;margin:0px 0px; background-color:brown;}#Logo ul li/*li小格子*/{width:139px; height:45px;background-color:brown; list-style:none;/*去掉圆点*/float:left;color:white;font-size:18px;font-family:"微软雅黑";text-align:center;line-height:45px;border-right:1px solid #690f0f;/*右边框*/}#Logo ul li a /*字*/{color:white;font-size:18px;font-family:"微软雅黑";text-decoration:none;}#Logo ul li:hover /*滑过li的效果*/{background:rgba(165,42,42,0.45);}#Logo ul li ul li {border:none;border-top:1px solid #989898;background:rgba(165,42,42,0.45);} #Logo ul li ul{display:none; /*不显示*/}#Logo ul li ul li:hover{background-color:brown;}#Logo ul li:hover ul{display:block;}</style></head><body><form id="form1" runat="server"><div id="Logo"><ul><li><a href="#">首页</a></li><li><a href="#">新闻公告</a><ul><li><a href="#">新闻</a></li><li><a href="#">公告</a></li><li><a href="#">讲座</a></li><li><a href="#">其他</a></li></ul></li><li><a href="#">象形字</a><ul><li><a href="#">象形字搜索</a></li><li><a href="#">书法欣赏</a></li><li><a href="#">视频解说</a></li><li><a href="#">其他</a></li></ul></li><li><a href="#">论坛中心</a></li><li><a href="#">下载中心</a></li><li><a href="#">测试中心</a></li><li style="border:none;"><a href="#">个人中心</a><ul><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></li></ul></div></form></body></html>
比较简单，没有难度。
