ul li 制作导航菜单

效果图：

代码段：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="daohang.aspx.cs" Inherits="daohang" %><!DOCTYPE html><html xmlns="http://www.w3.org/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>

比较简单，没有难度。

ul li 制作导航菜单相关推荐

css3+jQuery制作导航菜单（带动画效果）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css ...
使用CSS3动画制作导航菜单
使用CSS3动画制作导航菜单 1.使用定位属性把图片"赚"和"花"设置到相对应的位置上 2.使用animation属性给中间的"赚"和&qu ...
无序列表如何做一个导航条?html,如何使用无序列表制作导航菜单.docx
第一步:建立一个无序列表我们先建立一个无序列表,来建立菜单的结构.代码是: 首页产品介绍服务介绍技术支持立刻购买联系我们第二步:隐藏li的默认样式因为看起来不是很好看,菜单通常都不需要 ...
如何在WordPress中制作导航菜单（7个功能点）
在wordpress中添加导航菜单是初级的操作,但对于新手而言依旧会遇到一些问题,接下来我们就逐一讲解. 什么是导航菜单导航菜单通常位于网站的顶部和底部,用于方便用户快速打开关键页面,譬如下方两张图 ...
css 多层ul li,css中的ul li ul li ul li ul li 实现四级菜单
a { color:Black; /*--a标签的默认颜色为黑色--*/ text-decoration:none; /*--隐藏超链接的下划线--*/ } a:hover { /**--当鼠标聚焦到 ...
html ul li做左侧菜单,css中使用ul li ul li ul li ul li 实现四层级联菜单
复制代码代码如下: a { color:Black; /*--a标签的默认颜色为黑色--*/ text-decoration:none; /*--隐藏超链接的下划线--*/ } a:hover { / ...
CSS制作的导航菜单向上箭头
使用纯CSS技术制作导航菜单上的向上箭头图标,不使用图片,用CSS实现,挑战自己的CSS布局水平,最终效果自己满意,如果您对此感兴趣的话,就要好好研究一下CSS代码啦. <!DOCTYPE ht ...
蓝色箭头间隔css导航菜单代码
蓝色箭头间隔css导航菜单代码演示图片: 详细代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
php左测导航栏,商城左侧大分类导航菜单教程完整代码
提示:本页面右侧代码编辑器中的代码纯属展示调试代码本代码最终的效果请用下面的的完整代码,复制到本地运行完整代码html> 商城左侧大分类导航菜单 *{ margin:0; padding:0 ...

ul li 制作导航菜单

ul li 制作导航菜单

ul li 制作导航菜单相关推荐

最新文章

热门文章