水平菜单(2)鼠标移入一级菜单时,显示二级菜单3)鼠标移入二级菜单时,二级菜单设置背景色。鼠标移出菜单时,二级菜单隐藏
时间: 2024-10-20 22:03:24 浏览: 21
要创建一个这样的水平导航菜单,你可以使用HTML、CSS和JavaScript(或者jQuery)来实现。这里是一个简单的例子:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropdown-btn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #ddd;}
.show {display:block;}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li class="dropdown">
<button class="dropdown-btn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
<!-- Add more menu items as needed -->
</ul>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// Show dropdown on hover
$('li.dropdown').hover(
function() {
$('.dropdown-content', this).stop().slideToggle(300);
},
function() {
$('.dropdown-content', this).slideUp(300);
}
);
});
</script>
</body>
</html>
```
在这个例子中,我们首先定义了一个`<ul>`元素作为主菜单,每个`<li>`元素代表一级菜单项,当它包含`.dropdown`类时,表示这是一个可展开的菜单。`.dropdown-btn`用于触发下拉菜单的显示,`.dropdown-content`则是用来存放二级菜单项。
在jQuery脚本部分,我们监听了`.dropdown`元素的`mouseover`和`mouseout`事件,当鼠标悬停在一级菜单上时,`dropdown-content`下拉菜单显示,鼠标移出时则隐藏。
阅读全文