没有<li>的列表在另一个里面，因为我只想让类“producto”生成子菜单。当我悬停它时，我可以让元素“producto”有背景，所以我认为规范很好。
我想要一个嵌套到类“producto”的下拉子菜单，因为我不知道为什么规则“.product:hover...”不起作用。我想将此菜单用于更大的网站，这就是我不使用 <li> 的原因包裹到 <a>标签(当我在较大的网站上使用它时，它会破坏结构)。
.menu1 {
position:relative;
background: rgba(110,50,3,0.2);
}
.menu1 a {
background:#6f2;
display:col;
float:left;
color: #fff;
height: 10px;
text-decoration: none;
padding-right:60px;
padding-left:110px;
padding-top:10px;
padding-bottom:40px;
margin-top:0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
}
.menu1 ul li{
position:absolute;
left:290px;
top:-10px;
display:none;
color: #f23;
width: 100px;
padding-top:90px;
padding-left:30px;
padding-right:60px;
padding-bottom:10px;
margin-top:0px;
margin-bottom:0px;
list-style-type:none;
}
.producto {
position:relative;
display:col;
background:rgba(250,50,3,0.3);
}
.producto:hover ul li {
background: rgba(250,50,3,0.3);
display: block;
}<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="prueba2.css">
</head>
<body>
<nav class="menu1">
<a href="#">Inicio<img src="flechita.png"></a>
<a href="#">Nosotros<img src="flechita.png"></a>
<a href="#" class="producto">Productos / Licenciamientos<img src="flechita.png"></a>
<ul>
<li>Laptops</li>
<li>Desktop</li>
</ul>
<a href="">Hardware<img src="flechita.png"></a>
<a href="">Contacto<img src="flechita.png"></a>
</nav>
</body>
</html>最佳答案
试试这个。
HTML:
<ul id='nlist'>
<li><a href='#' class='home'>Home</a></li>
<li><a href='#' class='about'>About</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Links</a>
<ul class="dropdown-content">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li><a href='#' class='volunteer'>Volunteer</a></li>
<li><a href='#' class='contact'>Contact</a></li>
<li><a href='#' class='calender'>Calender</a></li>
</ul>
CSS:
ul {
}
.dropdown{
position:relative;
}
li a, .dropbtn {
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
left:-9999px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
left:0px;
}
ul {
background-color: #a2ded0;
margin: 0px;
padding: 0px;
border: 0px;
vertical-align: middle;
}
ul#nlist {
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
ul#nlist li {
display: inline;
}
关于html - 我无法制作下拉菜单来生成二级子菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38556395/