HTML+CSS导航菜单设计

一、一级水平导航菜单

1、表格+超链接

<table>
	<tr>
		<td>&nbsp;</td>
		<td><a href="#">首页</a></td>
		<td><a href="#">期刊介绍</a></td>
		<td><a href="#">编委会</a></td>
		<td><a href="#">常见问题</a></td>
		<td><a href="#">订阅</a></td>
		<td><a href="#">过刊浏览</a></td>
		<td><a href="#">优先出版</a></td>
		<td>&nbsp;</td>
	</tr>
</table>

<!--样式表-->
table
{
	width: 978px;
	height: 40px;
	text-align: center;
	background: skyblue;
}
a:link,a:visited,a:hover,a:active
{
	text-decoration: none;
	color: #ffffff;
}
a:hover
{
	color: red;
	border-bottom: 5px solid #ff0000;
}

2、无序列表+超链接

<div id="nav">
	<div class="navwrap">
		<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>
			<li><a href="#">过刊浏览</a></li>
			<li><a href="#">优先出版</a></li>
		</ul>
	</div>
</div>

<!--样式表-->
#nav
{
	width: 100%;
	font-size: 12px;
	background: skyblue;
}
.navwrap
{
	width: 978px;
	height: 40px;
	margin: 0 auto;
	background: skyblue;
}
ul
{
	width: 898px;
	height: 40px;
	margin: 0;
	padding: 0 0 0 130px;
	list-style: none;  /*去除列表项前的符号*/
}
li
{
	float: left;  /*设置列表项浮动*/
}
a
{
	line-height: 40px;
	font-weight: bold;
	margin: 0 10px;
	color: #fff;
	text-decoration: none;
}
a:hover
{
	color: #ff3d3d;
}

二、二级水平导航菜单

1、下拉菜单

<ul>
	<li><a href="#">首页</a></li>
	<li><a href="#">jQuery特效</a>
		<ul>
			<li><a href="#">jQuery图片特效</a></li>
			<li><a href="#">jQuery导航特效</a></li>
			<li><a href="#">jQuery选项卡特效</a></li>
			<li><a href="#">jQuery文字特效</a></li>
		</ul>
	</li>
	<li><a href="#">JavaScript特效</a></li>
	<li><a href="#">Flash特效</a>
		<ul>
			<li><a href="#">Flash图片特效</a></li>
			<li><a href="#">Flash导航特效</a></li>
			<li><a href="#">Flash选项卡特效</a></li>
			<li><a href="#">Flash文字特效</a></li>
		</ul>
	</li>
	<li><a href="#">div+css教程</a></li>
	<li><a href="#">HTML5教程</a></li>
</ul>

<!--样式表-->
ul  /*这两个属性是考虑到不同浏览器的兼容性*/
{
	margin: 0px;
	padding: 0px;
}
ul li  /*列表项由垂直排列改为水平排列*/
{
	height: 30px;
	width: 115px;
	list-style: none;
	float: left;
	display: inline;
	font: 0.9em arial,helvetica,sans-serif;
	text-align: center;
}
ul li a
{
	color: #fff;
	width: 113px;
	margin: 0px;
	padding: 0px 0px 0px 8px;
	text-decoration: none;
	display: block;
	background: #808080;
	line-height: 29px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
ul li ul li
{
	height: 25px;
	text-align: center;
}
ul li ul li a
{
	background: #666;
	line-height: 24px;
}
ul li a:hover
{
	background: #666;
	border-bottom: 1px dashed #ff0000;
}
ul li ul
{
	visibility: hidden;  /*也可设置为display:none;*/
}
ul li:hover ul
{
	visibility: visible;  /*也可设置为display:block;*/
}
ul li ul li a:hover
{
	background: #333;
}

2、横向二级导航菜单

<div id="menu">
	<ul>
		<li><a href="#">首页</a></li>
		<li><a href="#">jQuery特效</a>
			<div class="submenu">
				<ul>
					<li><a href="#">jQuery图片特效</a></li>
					<li><a href="#">jQuery导航特效</a></li>
					<li><a href="#">jQuery选项卡特效</a></li>
					<li><a href="#">jQuery文字特效</a></li>
				</ul>
			</div>
		</li>
		<li><a href="#">JavaScript特效</a></li>
		<li><a href="#">Flash特效</a>
			<div class="submenu">
				<ul>
					<li><a href="#">Flash图片特效</a></li>
					<li><a href="#">Flash导航特效</a></li>
					<li><a href="#">Flash选项卡特效</a></li>
					<li><a href="#">Flash文字特效</a></li>
				</ul>
			</div>
		</li>
		<li><a href="#">div+css教程</a></li>
		<li><a href="#">HTML5教程</a></li>
	</ul>
</div>

<!--样式表-->
#menu
{
	padding-left: 100px;
	margin: 0 auto;
	text-align: center;
	width: 100%;
	height: 60px;
	background: #55aaee;
	border: 1px solid #333;
}
#menu ul  /*考虑到不同浏览器的兼容性*/
{
	margin: 0px;
	padding: 0px;
}
submenu
{
	width: 900px;
	height: 28px;
	text-align: center;
}
#menu ul li  /*主菜单*/
{
	height: 30px;
	width: 115px;
	list-style: none;
	float: left;
	display: inline;
	font: 0.9em arial,helvetica,sans-serif;
	text-align: center;
}
ul li a
{
	color: #fff;
	width: 113px;
	margin: 0px;
	padding: 0px 0px 0px 8px;
	text-decoration: none;
	display: block;
	background: #55a0ff;
	line-height: 29px;
	border-bottom: 1px solid #ccc;
}
ul li .submenu ul li  /*子菜单中列表项的高度，与主菜单不同*/
{
	height: 25px;
	text-align: center;
}
ul li .submenu ul li a
{
	background: #55aaee;
	line-height: 24px;
}
ul li a:hover
{
	background: #666;
	border-bottom: 1px dashed #ff0000;
}
ul li .submenu  /*子菜单初始状态为隐藏*/
{
	visibility: hidden;  /*也可设置为display:none;*/
}
.submenu ul li
{
	height: 24px;
	width: 115px;
	list-style: none;
	float: left;
	display: inline;
	font: 0.8em arial,helvetica,sans-serif;
	text-align: center;
}
ul li:hover .submenu
{
	visibility: visible;  /*也可设置为display:block;*/
}
ul li .submenu ul li a:hover
{
	background: #333;
}