请参阅下面的代码。当您将鼠标悬停在“商店”上时,我很难让我的SubNav出现。我从其他可以正常工作的项目中复制了下面的代码,但是现在什么也没有发生。对于SubNav,我只是在寻找下拉菜单并显示其他项目。这将在网站的所有页面上显示。有什么建议么?谢谢!
/* stlyes for body */
body {
font-family: 'Trocchi', serif;
background-color: white;
margin: 0px;
width: 900px;
margin: 0 auto;
border: 3px solid #FEFA91;
}
h1,
h2,
h3,
p {
margin: 0;
padding: 0;
}
a {
font-weight: bold;
color: white;
}
a:link,
a:visited {
color: black;
}
a:hover,
a:focus {
color: #FEFA91;
}
/* Header */
header {
background-color: #FEFA91;
width: 100%;
}
header img {
display: block;
margin-right: auto;
margin-left: auto;
padding-top: 5px;
}
/* the styles for the navigation menu */
#nav_menu {
display: block;
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
}
#nav_menu ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
#nav_menu ul li {
float: left;
width: 25%;
}
#nav_menu ul li a {
display: block;
width: 100%;
text-align: center;
padding: 1em 0;
text-decoration: none;
background-color: #FEFA91;
color: black;
}
#nav_menu a.current {
color: white;
}
#nav_menu ul ul {
display: none;
position: absolute;
top: 100%;
}
#nav_menu ul ul li {
float: none;
}
#nav_menu ul li a:hover,
#nav_menu ul li a:focus {
background-color: black;
color: white;
}
#nav_menu ul li:hover>ul {
display: block;
}
#nav_menu>ul:after {
content: "";
clear: both;
display: block;
}
/* Main */
main {
padding: 20px;
max-width: 950px;
height: auto;
}
/* Section */
section {
width: 660px;
margin: 0;
padding: 11px 0 0 0;
}
section img {
padding: 0 15px 10px 15px;
}
section p {
text-align: left;
margin: 10px;
}
section dl {
font-size: 13px;
text-indent: 30px;
padding: 20px 0 0 0;
}
section h1 {
font-size: 35px;
font-family: 'Euphoria Script', cursive;
}
/* Aside 1 */
#aside1 {
width: 150px;
height: 310px;
float: left;
background-color: #FEFA91;
padding: 10px 0 0 0;
text-align: center;
}
#aside1 img {
text-align: center;
}
/* Aside 2 */
#aside2 {
width: 150px;
height: 310px;
float: right;
background-color: #FEFA91;
padding: 10px 0 0 0;
text-align: center;
}
#aside2 img {
text-align: center;
}
#aside2 h2 {
font-size: 15px;
}
#aside2 p {
font-size: 13px;
}
#aside2 hr {
border: 1px #000000 solid;
}
/* Footer */
footer {
clear: both;
padding: 15px;
background-color: #FEFA91;
position: relative;
}
footer p {
font-size: 90%;
text-align: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ears To You Boutique - Holiday Ears</title>
<link rel="shortcut icon" href="../images/tansp.png">
<link rel="stylesheet" href="../styles/normalize.css">
<link rel="stylesheet" href="../styles/ears.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Euphoria+Script">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trocchi">
</head>
<body>
<header>
<a href="../index.html"><img src="../images/rsz_logo.png" alt="Logo" height="100" class="center"></a>
</header>
<nav id="nav_menu">
<ul>
<li><a href="../pages/about.html">About</a></li>
<li><a href="../pages/shop.html">Shop</a>
<ul>
<li><a href="../pages/holidayears.html">Holiday</a></li>
<li><a href="../pages/characterears.html">Character</a></li>
<li><a href="../pages/eventears.html">Event</a></li>
</ul>
</li>
<li><a href="../pages/gallery.html">Gallery</a></li>
<li><a href="../pages/calendar.html">Calendar</a></li>
</ul>
</nav>
<main>
<aside id="aside1">
<img src="../images/castle.jpg" width="125px">
<img src="../images/christmas2.jpg" width="125px">
<img src="../images/christmas3.jpg" width="125px">
</aside>
<section>
<img src="../images/christmas1.jpg" width="220px" style="float:left">
<h1>Christmas Ears</h1>
<p>Do you love Christmas?
<br />If so, these red and green ears featuring ice skating elves are perfect for you!</p>
<p>Purchase at <a href="http://www.etsy.com" target="_blank">Etsy.com</a></p>
<dl>
<dt>Bow: Red</dt>
<dt>Band: Green</dt>
<dt>Ears: Red & Green with Elves</dt>
</dl>
</section>
<aside id="aside2">
<h2>Shop Other <br />Holiday Ears</h2>
<hr>
<br />
<img src="../images/halloween.jpg" width="125px">
<p>Halloween</p>
<br />
<br />
<img src="../images/spring.jpg" width="125px">
<p>Spring</p>
</aside>
</main>
<footer>
<p>
<a href="http://www.facebook.com" target="blank"><img src="../images/face.png" width="40"></a>
<a href="http://www.instagram.com" target="blank"><img src="../images/insta.jpg" width="36"></a>
<a href="http://www.pinterest.com" target="blank"><img src="../images/pin.jpg" width="40"></a>
</p>
</footer>
</body>
</html>
最佳答案
#nav_menu {
display: block;
overflow: hidden; //remove
width: 100%;
margin: 0;
padding: 0;
}
#nav_menu ul ul {
display: none;
position: absolute;
top: 100%;
width: 100%; // added
}
关于html - SubNav不出现,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49865326/