CSS JavaScript DOM写的仿谷瀑网搜索导航-优快云博客

本文链接：https://blog.youkuaiyun.com/ios0213/article/details/51699748

本文提供了一个详细的HTML与CSS结合使用的实例，展示了如何创建一个响应鼠标悬停效果的导航菜单，并且包括了基本的页面布局结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.wrap{
	margin:0 auto;
	border:1px solid #FFF;
}
.menu {
	width: 80%;
	height: 40px;
	margin: 0 auto;
	margin-top: 50px;
	border-top:1px solid #F1F1F1;
}
.menuin {
	padding: 0;
	margin: 0;
	float: left;
}
.menu3 {
	float: right;
}
.menuin ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
.menu ul li a {
	text-decoration: none;
	color: #000;
	font-weight: bold;
	font-size: 14px;
}
.menu ul li a:hover {
	color: RGB(178,0,0);
}

.menuin ul li {
	float: left;
	text-align: center;
	width: 100px;
	line-height: 40px;
	border-top:3px solid #FFF;
}
.menu3{
	background-color:#F2F2F2;
	line-height:40px;
}
.menu3 a{
	text-decoration:none;
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
	padding:0 9px;
	color:#999999;
	border-right:1px solid #999999;
}
.menu3 a:hover{
	color:#b20000;
}
.banner_list5{
	width:80%;
	height:137px;
	margin:0 auto;
	background-image:url(cxz.bmp);
	background-repeat:no-repeat;
}
.cl{
	clear:both;
}
</style>
<script>
var m=document.getElementsByTagName("li");
function moveOver(cnt)
{
	m[cnt].style.borderTop="3px solid #000000";
}
function moveOut(cnt)
{
	m[cnt].style.borderTop="";
}
</script>
</head>

<body>
<div class="werap">
<div class="menu">
  <div class="menuin">
    <ul>
      <li><a href=# onMouseOver="moveOver(0)" onMouseOut="moveOut(0)">首页</a></li>
      <li><a href=# onMouseOver="moveOver(1)" onMouseOut="moveOut(1)">环宝通</a></li>
      <li><a href=# onMouseOver="moveOver(2)" onMouseOut="moveOut(2)">建站服务</a></li>
      <li><a href=# onMouseOver="moveOver(3)" onMouseOut="moveOut(3)">广告服务</a></li>
      <li><a href=# onMouseOver="moveOver(4)" onMouseOut="moveOut(4)">应用市场</a></li>
      <li><a href=# onMouseOver="moveOver(5)" onMouseOut="moveOut(5)">联系我们</a></li>
    </ul>
  </div>
  <div class="menu3"> <a href=#>加入谷瀑供应商</a> <a href=#>加入谷瀑采购商</a> </div>
</div>
<div class="cl"></div>
<div class="banner_list5"></div>
</div>
</body>
</html>