我们经常会在网页中嵌入下拉菜单,下面分享一下下拉菜单的简单实现,当然我分享的内容只是简单的实现了基本功能,并不具有优雅的外观样式(仅提供功能实现思想),希望对有些朋友有帮助。
(1)纯css实现下拉菜单
<html>
<head>
<style type="text/css">
li, ul{ list-style:none; }
a{ text-decoration:none; }
#box{ text-align:center; width:200px; }
#list{ display:none; }
#title:hover + ul{ display:block; }
</style>
</head>
<body>
<ul id="box">
<a href="#" id="title">The List</a>
<ul id="list">
<li><a href="#">list1</a></li>
<li><a href="#">list2</a></li>
<li><a href="#">list3</a></li>
<li><a href="#">list4</a></li>
</ul>
</ul>
</body>
</html>
(2)使用js实现下拉菜单
<html>
<head>
</head>
<title>JavaScript下拉菜单</title>
<style type="text/css">
a{ text-decoration:none; background-color:#00CC99; border:1px solid #fff;}
li{ width:200px; }
#list{ display:none; }
li, ul{ list-style:none; }
</style>
<script type="text/javascript">
window.οnlοad=function()
{
var title=document.getElementById("title");
var list=document.getElementById("list");
title.οnmοuseοver=function()
{
list.style.display="block";
}
title.οnmοuseοut=function()
{
list.style.display="none";
}
}
</script>
</head>
<body>
<ul id="">
<a href="#" id="title">The List</a>
<ul id="list">
<li><a href="#">list1</a></li>
<li><a href="#">list2</a></li>
<li><a href="#">list3</a></li>
<li><a href="#">list4</a></li>
</ul>
</ul>
</body>
</html>
代码写的粗劣,见谅嘞~ 在下也是小菜鸟一枚。