Question

我正在为我的网站的菜单/导航栏工作，但是当我添加信息子菜单的代码时，它无法正常工作。当我测试它时，我可以点击信息，然后将鼠标悬停在它上面，但它根本不会显示子菜单。

HTML代码：

<!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">

&copy; The Krian Society 2016 | All Rights Reserved.

</div>

<!--Closing brackets-->
</body>

</html>

CSS代码：

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

Answer 1

您必须将子菜单保留在li标记内。你的代码应该是：

<li><a href="#">Info</a>
<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>

Answer 2

请试试这个：

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="menu.css" />
<title>CSS Simple Drop Down Menu</title>
</head>
<body>
<div class="drop">
<ul class="drop_menu">
<li><a href='#'>Link 1</a>
    <ul>
    <li><a href='#'>Sub Link 1</a></li>
    <li><a href='#'>Sub Link 2</a></li>
    </ul>
</li>
<li><a href='#'>Link 2</a>
    <ul>
    <li><a href='#'>Sub Link 1</a></li>
    <li><a href='#'>Sub Link 2</a></li>
    <li><a href='#'>Sub Link 3</a></li>
    <li><a href='#'>Sub Link 4</a></li>
    </ul>
</li>
<li><a href='#'>Link 3</a>
    <ul>
    <li><a href='#'>Sub Link 1</a></li>
    <li><a href='#'>Sub Link 2</a></li>
    <li><a href='#'>Sub Link 3</a></li>
    <li><a href='#'>Sub Link 4</a></li>
    </ul>
</li>
</ul>
</div>
</body>
</html>

CSS：

.drop_menu {
    background:#005555;
    padding:0;
    margin:0;
    list-style-type:none;
    height:30px;
}
.drop_menu li { float:left; }
.drop_menu li a {
    padding:9px 20px;
    display:block;
    color:#fff;
    text-decoration:none;
    font:12px arial, verdana, sans-serif;
}

/* Submenu */
.drop_menu ul {
    position:absolute;
    left:-9999px;
    top:-9999px;
    list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#5FD367; }
.drop_menu li:hover ul {
    left:0px;
    top:30px;
    background:#5FD367;
    padding:0px;
}

.drop_menu li:hover ul li a {
    padding:5px;
    display:block;
    width:168px;
    text-indent:15px;
    background-color:#5FD367;
}
.drop_menu li:hover ul li a:hover { background:#005555; }

Answer 3

使用以下代码显示子菜单::

CSS：只需用

替换.sub菜单类

.sub-menu {
 padding: 10px;
 position: absolute;
 transition: opacity linear 0.15s;
 box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
 background: #2e2728;
 display: none;
 left: 46%;
}

HTML：在＆＃34; info＆＃34;中移动完整的子菜单。 li和set class＆＃34; info＆＃34;那个李

<li class="info"><a href="#">Info</a>
  <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>

Jquery：使用以下jquery在悬停时显示子菜单＆＃34; Info＆＃34;链路

<script type="text/javascript">
$('.info').mouseover(function(){
    $('.sub-menu').show();
});

$('.info').mouseout(function(){
    $('.sub-menu').hide();
});
</script>

Answer 4

我为您编写了解决此错误的代码
这是您的代码。 NO 1是html部分，NO 2是css部分

   <!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 class="sub-menu-hover"><a href="#">Info</a><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><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">&copy; The Krian Society 2016 | All Rights Reserved.</div><!--Closing brackets--></body></html>




@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:20%;background:#2e2728;display:none;position:absolute;float:left;top:140px;left:420px;}.sub-menu li {display:block;font-size:16px;}.sub-menu li a {padding:10px 30px;display:block;}.sub-menu-hover{background:#808080;}.sub-menu{background:#808080;}.sub-menu-hover:hover.sub-menu{color:#F00;display:block;opacity:9;}.sub-menu li a:hover, .sub-menu.current-item a {background:#3e3436;}

CSS子菜单无法正常工作

4 个答案: