Question

在另一个内部没有<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>

Answer 1

试试这个。

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;
}

https://jsfiddle.net/p9Lea8g4/7/

我无法制作下拉菜单来生成第二级子菜单

1 个答案: