css聚焦一级菜单后一直选中二级菜单
时间: 2023-07-28 12:18:35 浏览: 47
您可以使用CSS伪类选择器来实现这个效果。当一级菜单被聚焦时,您可以将其后面的二级菜单设置为可见,并使用:focus-within伪类选择器来保持二级菜单的可见状态。以下是一个示例CSS代码:
```
/* 隐藏所有二级菜单 */
ul ul {
display: none;
}
/* 当一级菜单被聚焦时,显示其后面的二级菜单 */
li:focus-within > ul {
display: block;
}
```
在HTML中,您需要使用tabindex属性来使一级菜单能够聚焦。例如:
```
<ul>
<li tabindex="0">一级菜单
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li tabindex="0">一级菜单
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
```
这将使每个一级菜单能够被聚焦,并且当聚焦时,其后面的二级菜单将保持可见状态。
相关问题
用html和css写一个二级菜单
好的,以下是一个简单的二级菜单的 HTML 和 CSS 代码:
HTML 代码:
```
<nav>
<ul>
<li><a href="#">菜单1</a>
<ul>
<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>
<li><a href="#">子菜单4</a></li>
<li><a href="#">子菜单5</a></li>
</ul>
</li>
<li><a href="#">菜单3</a></li>
</ul>
</nav>
```
CSS 代码:
```
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
position: relative;
}
nav ul li a {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
border: 1px solid #ccc;
}
nav ul ul li {
display: block;
}
nav ul ul li a {
padding: 5px 10px;
color: #333;
}
nav ul ul li a:hover {
background-color: #f5f5f5;
}
```
这个二级菜单使用了 HTML 的无序列表和 CSS 的绝对定位来实现。当鼠标悬停在菜单项上时,子菜单会显示出来。
利用js+css实现二级菜单栏
要实现二级菜单栏,可以使用JavaScript和CSS结合来实现。以下是一个简单的示例代码:
HTML代码:
```
<nav>
<ul>
<li><a href="#">一级菜单1</a>
<ul>
<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>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
</ul>
</li>
<li><a href="#">一级菜单3</a></li>
</ul>
</nav>
```
CSS代码:
```
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
position: relative;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
padding: 0;
margin: 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
nav ul li:hover > ul {
display: inherit;
}
nav ul ul li {
display: block;
float: none;
}
nav ul ul li a {
color: #333;
padding: 10px;
text-decoration: none;
display: block;
}
nav ul li a {
color: #fff;
display: block;
padding: 10px;
text-decoration: none;
}
nav ul li:hover {
background-color: #555;
}
nav ul li:hover a {
color: #fff;
}
```
JavaScript代码:
```
var dropdown = document.getElementsByTagName('li');
for (var i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener('mouseover', function() {
this.classList.add('show');
});
dropdown[i].addEventListener('mouseout', function() {
this.classList.remove('show');
});
}
```
通过上述代码,可以实现一个带有二级菜单栏的网页导航栏,鼠标移到一级菜单上时,二级菜单会显示出来。