menu和submenu菜单uihtml代码
时间: 2023-07-10 20:37:16 浏览: 56
下面是一个简单的menu和submenu菜单的uihtml代码示例:
```html
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul class="submenu">
<li><a href="#">Our Team</a></li>
<li><a href="#">Mission and Vision</a></li>
<li><a href="#">History</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul class="submenu">
<li><a href="#">Web Design</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">SEO</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
```
CSS样式代码:
```css
.menu {
display: inline-block;
margin: 0;
padding: 0;
}
.menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.menu li {
position: relative;
float: left;
margin: 0;
padding: 0;
}
.menu li a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #333;
font-weight: bold;
}
.menu ul.submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
margin-top: 1px;
background-color: #fff;
border: 1px solid #ccc;
border-top: none;
z-index: 999;
}
.menu ul.submenu li {
float: none;
margin: 0;
padding: 0;
}
.menu ul.submenu li a {
display: block;
padding: 5px 10px;
text-decoration: none;
color: #333;
font-weight: normal;
}
.menu li:hover > ul.submenu {
display: block;
}
```
这个示例中,我们使用了HTML的嵌套列表来创建菜单,其中每个子菜单都是另一个嵌套列表。通过CSS,我们设置了菜单和子菜单的样式,并使用:hover伪类来实现鼠标悬停时显示子菜单。