我对我正在制作的网站有疑问。它有一个带有类别按钮的栏。当您将鼠标悬停在它上面时,会出现一个菜单,其中包含我的SQL数据库中的所有类别。当您将鼠标悬停在显示各自子类别的每个类别上时,我想弹出另一个菜单。我的问题是子类别菜单根本不会弹出。 PHP和一切都很好。这是我的代码:
.categorii {
position: relative;
z-index: 2;
float: left;
width: 120px;
height: 100%;
background-color: transparent;
outline: none;
border: none;
font-family: Oswald;
text-align: right;
color: black;
font-size: 18px;
background-image: url('pictures/buton_categorii.png');
background-repeat: no-repeat;
cursor: pointer;
}
.dropdown-categorii:nth-child(3n+1) {
clear: left;
}
.dropdown-categorii {
float: left;
z-index: 1;
margin-left: 20px;
width: 11%;
height: 40px;
z-index: 1;
}
.dropdown-content-categorii {
display: none;
float: left;
position: absolute;
overflow: scroll;
margin-top: 38px;
border: 1px solid #696969;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
width: 300px;
height: 500px;
background-color: white;
z-index: 3;
font-family: Ubuntu2;
color: #003e91;
animation-name: slideIn-categ;
animation-duration: 0.2s;
}
@keyframes slideIn-categ {
from {margin-top: 20px; opacity: 0;}
to { margin-top: 38px; opacity: 1;}
}
.dropdown-categorii:hover .dropdown-content-categorii {
display: block;
}
.categoriesep {
display: block;
font-family: Ubuntu2;
color: #003e91;
text-align: left;
font-size: 18px;
background: transparent;
border-color: none;
border: 0;
margin-top: 10px;
cursor: pointer;
}
.categoriesep-content {
display: none;
float: left;
position: absolute;
overflow: scroll;
margin-left: 100px;
border: 1px solid #696969;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
width: 300px;
height: 500px;
background-color: white;
z-index: 5;
font-family: Ubuntu2;
color: #003e91;
animation-name: slideIn-categsep;
animation-duration: 0.2s;
}
.categoriesep:hover .categoriesep-content {
display: block;
}

<div class="dropdown-categorii">
<button class="categorii" id="categorii">CATEGORII</button>
<div class="dropdown-content-categorii" id="dropdown-content-categorii">
<a href="http://localhost/prod.php?categ=+PLASE+INSECTE"><button class="categoriesep" id="categoriesep"> PLASE INSECTE</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=ACCESORII+CONSTR.CASA+INTERIOR"><button class="categoriesep" id="categoriesep">ACCESORII CONSTR CASA INTERIOR</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=ACCESORII+CONSTRUCTII"><button class="categoriesep" id="categoriesep">ACCESORII CONSTRUCTII</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=ACCESORII+INSTALATII+SANITARE"><button class="categoriesep" id="categoriesep">ACCESORII INSTALATII SANITARE</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=ACCESORII.SCULE+PTR.LEMN"><button class="categoriesep" id="categoriesep">ACCESORII SCULE PTR LEMN</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=ADEZIVI"><button class="categoriesep" id="categoriesep">ADEZIVI</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=AMBALARE"><button class="categoriesep" id="categoriesep">AMBALARE</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=BOILERE%2CRADIATOARE"><button class="categoriesep" id="categoriesep">BOILERE RADIATOARE</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=CHIMICE+SI+TEHNICE"><button class="categoriesep" id="categoriesep">CHIMICE SI TEHNICE</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=CORPURI+DE+ILUMINAT"><button class="categoriesep" id="categoriesep">CORPURI DE ILUMINAT</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=ECHIPAMENT+PROTECTIE"><button class="categoriesep" id="categoriesep">ECHIPAMENT PROTECTIE</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=ELECTROCASNICE"><button class="categoriesep" id="categoriesep">ELECTROCASNICE</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=ELECTRONICE"><button class="categoriesep" id="categoriesep">ELECTRONICE</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=FERESTRE+PVC+SI+ALUMINIU"><button class="categoriesep" id="categoriesep">FERESTRE PVC SI ALUMINIU</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=FERONERIE"><button class="categoriesep" id="categoriesep">FERONERIE</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=FERONERIE+PVC+SI+ALUMINIU"><button class="categoriesep" id="categoriesep">FERONERIE PVC SI ALUMINIU</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=FIXARI+CONEXPAND"><button class="categoriesep" id="categoriesep">FIXARI CONEXPAND</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=FIXARI+CU+DIBLURI"><button class="categoriesep" id="categoriesep">FIXARI CU DIBLURI</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=GENERALE"><button class="categoriesep" id="categoriesep">GENERALE</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=GRADINA.SCULE.CASA.SOBE"><button class="categoriesep" id="categoriesep">GRADINA SCULE CASA SOBE</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=INSTALATII+APA"><button class="categoriesep" id="categoriesep">INSTALATII APA</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=MATERIALE+SI+ACCES.PTR.INST.ELECTR."><button class="categoriesep" id="categoriesep">MATERIALE SI ACCES PTR INST ELECTR </button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=MOBILIER"><button class="categoriesep" id="categoriesep">MOBILIER</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=OBIECTE+SANITARE"><button class="categoriesep" id="categoriesep">OBIECTE SANITARE</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=PLASE+INSECTE"><button class="categoriesep" id="categoriesep">PLASE INSECTE</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=PRELUCRARI+ASCHIERE"><button class="categoriesep" id="categoriesep">PRELUCRARI ASCHIERE</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=SCULE+DEBITARE%2CSLEF.POLIZARE"><button class="categoriesep" id="categoriesep">SCULE DEBITARE SLEF POLIZARE</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=SCULE+PTR.BETON%2CZIDARIE%2CSTICLA"><button class="categoriesep" id="categoriesep">SCULE PTR BETON ZIDARIE STICLA</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=SCULE%2BUNELTE.ACCESORII"><button class="categoriesep" id="categoriesep">SCULE UNELTE ACCESORII</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=STRUCTURI+LEMN"><button class="categoriesep" id="categoriesep">STRUCTURI LEMN</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=SURUB.+AUTOFORANTE%2CAUTOFILETANTE"><button class="categoriesep" id="categoriesep">SURUB AUTOFORANTE AUTOFILETANTE</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=SURUBURI+LEMN"><button class="categoriesep" id="categoriesep">SURUBURI LEMN</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=TEHNICE"><button class="categoriesep" id="categoriesep">TEHNICE</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=TEVI%2BFITINGURI"><button class="categoriesep" id="categoriesep">TEVI FITINGURI</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=UNELTE+DE+MANA"><button class="categoriesep" id="categoriesep">UNELTE DE MANA</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=UNELTE+ELECTRICE"><button class="categoriesep" id="categoriesep">UNELTE ELECTRICE</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=USI+DIVERSE%2CAL%2CPVC%2CGARAJ"><button class="categoriesep" id="categoriesep">USI DIVERSE AL PVC GARAJ</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
<a href="http://localhost/prod.php?categ=VAR+LAVABIL%2CPASTA%2CVOPSEA%2CDILUANT"><button class="categoriesep" id="categoriesep">VAR LAVABIL PASTA VOPSEA DILUANT</button></a>
<div class="categoriesep-content" id="categoriesep-content">This will be content</div>
</div>
</div>
&#13;
编辑:我已更新了代码段,因此它包含已解析的HTML。正如您所看到的,主菜单工作得很好,但是如果我将鼠标悬停在其中一个类别(由PHP创建)上,则没有任何反应,它应该是另一个弹出的菜单(使用类categoriesep-content
)。
谢谢你的帮助!