怎么把网页制作下拉菜单,自己设计网站的一二级栏目,怎么把网页制作下拉菜单,自己设计网站的一二级栏目,
在 HTML 中创建一个菜单列表:
<ul class="menu">
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">公司介绍</a></li>
<li><a href="#">团队成员</a></li>
</ul>
</li>
<li><a href="#">产品</a>
<ul>
<li><a href="#">产品一</a></li>
<li><a href="#">产品二</a></li>
</ul>
</li>
<li><a href="#">联系我们</a></li>
</ul>
使用 CSS 设置菜单的样式:
.menu {
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
float: left;
position: relative;
}
.menu a {
display: block;
padding: 8px 16px;
text-decoration: none;
}
.menu ul {
position: absolute;
top: 100%;
left: 0;
display: none;
}
.menu li:hover > ul {
display: block;
}
.menu ul ul {
top: 0;
left: 100%;
}
使用 JavaScript 来添加响应菜单的事件:
var menuItems = document.querySelectorAll('.menu li');
for (var i = 0; i < menuItems.length; i++) {
var menuItem = menuItems[i];
menuItem.addEventListener('mouseover', function() {
this.classList.add('hover');
});
menuItem.addEventListener('mouseout', function() {
this.classList.remove('hover');
});
}
如果答案对您有所帮助,望采纳。
C#?你用asp.net的话,系统控件里就有menu控件,支持多级,支持下拉