小白css+ul+li方式实现二级横向导航菜单_小白

http://blog.sina.com.cn/u/1139508153

首页博文目录关于我

个人资料

微博

加好友发纸条

写留言加关注

博客等级：
博客积分：

博客访问：
关注人气：
获赠金笔：0支
赠出金笔：0支
荣誉徽章：

正文字体大小：大中小

小白css+ul+li方式实现二级横向导航菜单

(2012-05-16 14:53:27)

标签：

杂谈

分类：网摘

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

style.css

#mymenu {
height: 25px;
width: 700px;
float: left;
position: relative;
}
#mymenu ul li {
float: left;
width: 25%;
list-style-type: none;
font-size: 14px;
color: #FFFFFF;
position: relative;
line-height:25px;
}
#mymenu ul li ul li {
float: none;
width: 100px;
background-color: #0066CC;
}

#mymenu ul li ul{
position: absolute;
right: 100px;
top: 25px;
display:none;
}

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

普通的div标签会影响外面表格的高度，超过会撑大。只有设置了position才会让其成为真正的层，不会撑大外层表格，而是浮动与其上。如果单设置float是无效的。

基于这个原因，#mymenu设了个relative。目的就是让其在表格单元格里浮动起来。

#mymenu ul li　要是relative #mymenu ul li ul要是absolute right: 100px;top: 25px;

#mymenu ul li 一级菜单是横向排列，所以float: left;

而里面包含的#mymenu ul li ul li是纵向排列，但受到了父级别float: left;的影响，为了消除这种影响float: none;　注意不是clear

#mymenu ul li:hover ul 则是触发菜单的精髓

阅读┊ 收藏 ┊ 喜欢 ▼ ┊打印┊举报/Report

前一篇：[转载]N73手机听筒声音变小问题的解决一法

后一篇：CSS Sprites技术

新浪BLOG意见反馈留言板　欢迎批评指正