Html用ul li实现多级横向菜单

<html>

<head>

<meta charset="utf-8"/>

<title>UL LI 实现多级横向菜单</title>

<style>

#menu1 li{width:50px;height:20px;background:red;margin-left:2px;float:left}

#menu1 li ul{display:none;}

#menu1 li:hover ul{display:block;}

</style>

</head>

<body>

<ul id="menu1">

<li>首页<ul><li>新闻</li><li>图片</li></ul></li>

<li>用户<ul><li>帖子</li><li>相册</li></ul></li>

<li>系统<ul><li>设置</li></ul></li>

</ul>

</body>

</html>

时间: 2024-12-29 09:54:30

Html用ul li实现多级横向菜单的相关文章

[转载] ul li css 做横向菜单

原文地址: http://www.cnblogs.com/amylis_chen/archive/2011/09/24/2188398.html 第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是: <ul> <li><a href="1">首页</a></li> <li><a href="2">产品介绍</a></li> <li

DIV+CSS布局重新学习之css控制ul li实现2级菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

ul li横向排列及圆点处理

如何用CSS制作横向菜单 让ul li横向排列及圆点处理   第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href="1">首页</a></li> <li><a href="2">产品介绍</a></li> <li><a href="3">服务介绍</a&

ul li 横向滚动 锚点的平滑跳转

源码是: 滑动效果: jQuery("#topHeaderBlack").anmate({scrollLeft:jQuery("#"+NowfloorUuid).offset().left},1000); topHeaderBlack  是包含了ul li 的div id jQuery("#"+NowfloorUuid)  是你需要锚点的li 我是通过下面代码变形达到效果(毕竟前端渣.见笑.) $(“html,body”).animate({sc

ul li做横向导航栏例子

/* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */ div.menu ul { list-style:none; /* 去掉ul前面的符号 */ margin: 0px; /* 与外界元素的距离为0 */ padding: 0px; /* 与内部元素的距离为0 */ width: auto; /* 宽度根据元素内容调整 */ } /* 所有class为menu的div中的ul中的li样式 */ div.menu ul li { float:left; /*

Ul li 竖排 菜单

1 Ul li 竖排 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head> 6 <meta http

MVC 多级目录菜单

MVC多级目录菜单  ----- 简单模拟 Model ---- cs { public class Class1 { public int ID{get;set;} public int parentID { get; set; } public int childID { get; set; } public string title { get; set; } } MVC View ---- cshtml: @using WebApplication1.Models; @{ ViewBag

完美拖拽 &amp;&amp;仿腾讯微博效果&amp;&amp; 自定义多级右键菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

使用jquery实现的多级树形菜单代码实例

使用jquery实现的多级树形菜单代码实例:树形菜单在网站中有大量的应用,这当然是因为它的独特优点,首先它可以有效的组织数据,使分类更为清晰明了,通常情况下树形菜单是可以折叠的,这样可以以更小的空间容纳更多的数据,下面就详细介绍一个使用jquery实现的属性菜单.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author&q