I am encountering difficulties in making my SubNav appear when hovering over the "Shop" section. Despite borrowing some code from successful projects, nothing seems to be happening now. I am aiming for the menu to drop down and display other items in the SubNav on all pages of the site. Any recommendations would be greatly appreciated. Thank you!
/* Custom styles for the 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 Styles */
header {
background-color: #FEFA91;
width: 100%;
}
header img {
display: block;
margin-right: auto;
margin-left: auto;
padding-top: 5px;
}
/* Navigation Menu Styles */
#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%;
}
... (remaining CSS styles)
<!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>
... (more HTML content)
</body>
</html>