When I hover over the drop down menu items, only the parts around the text are highlighted, leaving unhighlighted space to the left of the menu item. What do I need to change to get this effect to cover the whole width of the drop down menu item?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Connected | Sage Spiritual</title>
<link rel="stylesheet" href="sage.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&family=Newsreader:[email protected]&display=swap');
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
header {
font: 'Newsreader', Arial;
background-image: url(images/sparklebanner.jpg);
background-color: #7C8E93;
color: #292330;
font-size: 3.8rem;
text-align: center;
padding: 10px;
}
#logo {
float: left;
}
h1 {
font-family: 'Newsreader';
}
/*navigation-------------------*/
#navigation {
background-color: #EFE4DE;
font-size: 1.8rem;
border: 1px solid black;
}
nav {
background-color: #EFE4DE;
font-family: "Newsreader", Arial;
font-size: 1.8rem;
text-align: center;
max-width: 960px;
margin: 0 auto;
}
nav a:hover {
background-color: #ddd;
color: black;
border: 1px solid black;
}
#topnav {
list-style-type: none;
margin: 0;
padding: 0;
}
#topnav li {
display: inline-block;
position: relative;
font-size: 1.8rem;
}
#topnav li a {
display: block;
padding: 10px 20px;
color: #000;
text-decoration: none;
}
#topnav li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #F7F2EF;
}
#topnav li:hover > ul {
display: block;
}
#topnav li ul li {
display: block;
width: 100%;
}
#topnav li ul li ul {
display: none;
position: absolute;
top: 0;
left: 100%;
background-color: #F7F2EF;
}
#topnav li ul li:hover > ul {
display: block;
}
#topnav li ul li ul li {
display: block;
width: 100%;
}
</style>
</head>
<body>
<header>
<div id="logo"><a href="index.html"><img src="images/snake.png" width=120px height="175px" alt="sage spiritual snake logo" float="left"></a></div>
<h1><a href="index.html">Sage Spiritual</a></h1>
</header>
<!-- Top Navigation Bar -->
<div id="navigation"><nav>
<ul id="topnav">
<li><a href="index.html">Home</a></li>
<li>
<a href="magic.html">Magic</a>
</li>
<li>
<a href="spells.html">Spells</a>
<ul>
<li>
<a href="witches.html">Witches</a>
</li>
<li>
<a href="spellcasting.html">Spellcasting</a>
<ul>
<li><a href="energy.html">Energy</a></li>
<li><a href="altar.html">Altar</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="tools.html">Significant Objects</a>
<ul>
<li>
<a href="candles.html">Candles</a>
</li>
<li>
<a href="crystals.html">Crystals</a>
</li>
<li>
<a href="pantry.html">Pantry</a>
</li>
</ul>
</li>
<li>
<a href="divination.html">Divination</a>
</li>
<li>
<a href="timing.html">Timing & Cycles</a>
<ul>
<li>
<a href="holidays.html">Holidays</a>
</li>
<li>
<a href="cosmic.html">Cosmic</a>
<ul>
<li><a href="mooncycles.html">Moon Cycles</a></li>
<li><a href="astro.html">Astrological Seasons</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav></div>
I've tried playing around with the padding and the display properites but nothings worked.