您的位置：首页 > 理论基础 > 计算机网络

http://blog.sina.com.cn/s/blog_43eb83b90102dyl3.html

2013-08-29 22:14 239 查看

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td bgcolor="#0033CC"><div id="mymenu">

<ul>

<li>机构概况

<ul>

<li>机构情况</li>

<li>机构组成</li>

<li>机构组成</li>

</ul>

</li>

<li>人才引进</li>

<li>新闻动态</li>

<li>文化生活</li>

</ul>

</div></td>

</tr>

</table>

</body>

</html>

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 则是触发菜单的精髓

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航