0
Ich arbeite an der Menü-/Navigationsleiste für meine Website, aber als ich den Code für das Information-Untermenü hinzugefügt habe, hat es nicht funktioniert. Wenn ich es getestet habe, kann ich auf Info klicken und den Mauszeiger darüber bewegen, aber das Untermenü wird überhaupt nicht angezeigt.CSS-Untermenü funktioniert nicht
HTML-Code:
<!doctype html>
<!--Opening brackets-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
<meta charset="utf-8">
<title>Staff List- Krian Society</title>
</head>
<body>
<!--Header-->
<div id="header">
<table class="header">
<tr>
<td class="left">
Text here
</td>
<td class="right">
<div id=social>
<a href="https://www.facebook.com/KrianSociety/"><img src="images/facebook.png" width="32" height="32" alt="Facebook"/></a>
<a href="http://steamcommunity.com/groups/KrianSoc"><img src="images/steam.png" width="32" height="32" alt="Steam"/></a>
<a href="https://www.youtube.com/channel/UCdqfqnmrIxrVcGvM6mphaog"><img src="images/youtube.png" width="32" height="32" alt="Youtube"/></a>
</div>
</td>
</tr>
</table>
</div>
<!--Banner-->
<div id="banner">
<img src="images/banner.jpg" width="43%" alt="TKS Banner"/>
</div>
<!--Nav Bar-->
<div id="menu">
<hr />
<ul>
<li><a href=index.html>Home</a></li>
<li><a href="donate/index.php">Donate</a></li>
<li><a href="vote/index.php">Vote</a></li>
<li><a href="#">Info</a></li>
<ul class="sub-menu">
<li><a href="#">Test 1</a></li>
<li><a href="#">Test 2</a></li>
<li><a href="#">Test 3</a></li>
<li><a href="#">Test 4</a></li>
</ul>
<li>Live Map</li>
<li><a href="http://forums.kriansociety.com/">Forums</a></li>
<li><a href="http://wiki.kriansociety.com/Wiki">Wiki</a></li>
</ul>
<hr />
</div>
<!--Footer-->
<div id="footerstar">
<img src="images/star.png" width="100px" height="100px" />
</div>
<div id="footerlegal">
© The Krian Society 2016 | All Rights Reserved.
</div>
<!--Closing brackets-->
</body>
</html>
CSS-Code:
@charset "utf-8";
/*Misc CSS*/
Body {
margin: 0px;
background-color: #272727;
}
hr {
border-color: #7b8e19
}
@font-face {
font-family: optimusPrinceps;
src: url('fonts/OptimusPrinceps.ttf');
}
/*Header*/
#header {
background-color: #7b8e19;
color: #ffffff;
text-align: center;
padding: 5px;
}
#header table {
margin-left: 5%;
margin-right: 5%;
}
#social img{
margin-left: 0.5%;
margin-right: 0.5%;
}
table.header {
width: 90%;
}
td.left {
text-align: left;
padding-top: 1%;
}
td.right {
text-align: right;
}
/*Banner*/
#banner {
padding-top: 1%;
text-align: center;
}
/*Nav Bar*/
#menu {
width: 100%;
}
#menu ul {
text-align: center;
color: #ffffff;
font-size: 20px;
}
#menu ul li {
display: inline;
margin-left: 1.5%;
margin-right: 1.5%;
font-family: optimusPrinceps
}
#menu ul li a{
text-decoration: none;
color: #ffffff;
}
/*Footer*/
#footerstar {
width: 100%;
background-color:#7b8e19;
text-align: center;
font-weight: bold;
padding-top: 10px;
padding-bottom: 10px;
}
#footerlegal {
width: 100%;
text-align: center;
background-color:#171717;
color: #FFFFFF;
padding-bottom: 5px;
padding-top: 5px;
font-family: optimusPrinceps
}
/* sub menu */
#menu li:hover .sub-menu {
/*z-index:1;*/
opacity:1;
}
.sub-menu {
width:100%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0,0,0,0.2);
background:#2e2728;
}
.sub-menu li {
display:block;
font-size:16px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background:#3e3436;
}
Ich tat dies und lud es hier (http://kriansociety.com/beta/dropdown/staff.php), aber es scheint immer noch nicht zu funktionieren – Rhmul
Bitte sehen Sie diesen Link: https://jsfiddle.net/px39x2he/25/ – satya