可以给出具体例子吗
时间: 2023-10-10 09:08:40 浏览: 21
当鼠标悬停在一级导航上时,显示该一级导航下的二级导航:
```html
<ul class="nav">
<li><a href="#">一级导航1</a>
<ul class="sub-nav">
<li><a href="#">二级导航1</a></li>
<li><a href="#">二级导航2</a></li>
<li><a href="#">二级导航3</a></li>
</ul>
</li>
<li><a href="#">一级导航2</a>
<ul class="sub-nav">
<li><a href="#">二级导航1</a></li>
<li><a href="#">二级导航2</a></li>
<li><a href="#">二级导航3</a></li>
</ul>
</li>
</ul>
```
```css
.sub-nav {
display: none;
}
.nav li:hover .sub-nav {
display: block;
}
```
将二级导航中的每个子元素都设置为float:left,使得它们成为同行显示:
```css
.sub-nav li {
float: left;
width: 100px;
height: 30px;
}
```
还可以通过设置margin和padding属性来调整子元素之间的间距和边距:
```css
.sub-nav li {
float: left;
width: 100px;
height: 30px;
margin-right: 10px;
padding: 5px;
}
```