欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS鼠标悬停下拉菜单演示

程序员文章站 2023-12-30 13:13:22
...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>悬停下拉菜单演示</title>
    <style type="text/css">
        a {
            text-decoration: none;
            color: black;
        }
 
        .nav {
            background-color: steelblue;
            height: 40px;
            width: 80%;
            border: 1px solid #f0ad4e;
            border-radius: 5px;
            margin: 0 auto;
            padding-top: 1px;
            padding-bottom: 3px;
            box-shadow: 1px 1px 0 0 gray;
        }
 
        .dropdown {
            list-style: none;
            float: left;
            margin-right: 5px;
            display: block;
            width: 80px;
        }
 
        .dropdown:hover {
            background-color: white;
            border-radius: 5px 5px 0 0;
            padding-top: 5px;
        }
 
        .menubar {
            color: white;
        }
 
        .dropdown:hover .menubar{
            color: black;
        }
 
        .dropdown:hover .dropdown-menu {
            border: 1px solid #f7ecb5;
            border-radius: 5px;
            padding: 5px;
            width: 100px;
            margin-top: 8px;
        }
 
        .dropdown:hover .dropdown-menu li {
            list-style: none;
            line-height: 30px;
            display: block;
        }
 
        .dropdown-menu li {
            display: none;
            background-color: transparent;
        }
 
        .dropdown-menu > li:hover {
            background-color: steelblue;
        }
 
        .dropdown-menu > li:hover a {
            color: white;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div class="nav">
    <ul>
        <li class="dropdown">
            <a href="#" class="menubar">搜索引擎</a>
            <ul class="dropdown-menu">
                <li><a href="#" onclick='a()'>百度</a></li>
                <li><a href="#" onclick='s()'>搜狗</a></li>
                <li><a href="#" onclick='d()'>360搜索</a></li>
                <li><a href="#" onclick='f()'>必应</a></li>
                <li><a href="#" onclick='g()'>谷歌</a></li>
                <li><a href="#" onclick='h()'>好搜</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#" class="menubar">英语学习</a>
            <ul class="dropdown-menu">
                <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>
        </li>
        <li class="dropdown">
            <a href="#" class="menubar">大学数学</a>
            <ul class="dropdown-menu">
                <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>
        </li>
    </ul>
</div>
	<script>
	function a(){
	alert("百度")
	}
	function s(){
	alert("搜狗")
	}
	function d(){
	alert("360搜索")
	}
	function f(){
	alert("必应")
	}
	function g(){
	alert("谷歌")
	}
	function h(){
	alert("好搜")
	}	

	</script>
</body>
</html>

上一篇：

下一篇：

推荐阅读