每个数据库行的单独元素未显示

时间:2018-05-27 18:08:57

标签: html css

我对我正在制作的网站有疑问。它有一个带有类别按钮的栏。当您将鼠标悬停在它上面时,会出现一个菜单,其中包含我的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;
&#13;
&#13;

编辑:我已更新了代码段,因此它包含已解析的HTML。正如您所看到的,主菜单工作得很好,但是如果我将鼠标悬停在其中一个类别(由PHP创建)上,则没有任何反应,它应该是另一个弹出的菜单(使用类categoriesep-content)。 谢谢你的帮助!

0 个答案:

没有答案