Menu icon Foundation
Full padding anchor tag in top menu

Hi, I am new to Foundation. I have been playing around with the anchor tag styles but can not find a way to get it to span the full height of the div on hover. When the mouse hovers over, the new red color and shadow should cover the entire gray area. Any ideas? 

<style>
        ul li a:hover {
    background: rgb(204, 0, 0);
    box-shadow: 3px 5px 5px 2px rgba(0,0,0,.2);
    transition: background .4s ease-out, box-shadow .2s ease-in;
}
    </style>
</head>
<body>
     <h1 class="springman"><span style="margin-left: 5px;">Springman Student Website</span></h1>
   <div class="top-bar sticky">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li>
        <a href="#">Schedule</a>
        <ul class="menu vertical">
          <li><a href="#">Discovery</a></li>
          <li><a href="#">Genesis</a></li>
          <li><a href="#">Equinox</a></li>
          <li><a href="#">Summit</a></li>
          <li><a href="#">Infinity</a></li>
          <li><a href="#">Pegasus</a></li>
        
        </ul>
      </li>
      <li><a href="#">Powerschool</a></li>
      <li><a href="#">Makerspace</a></li>
    </ul>
  </div>
</div>

anchorcsspadding

Hi, I am new to Foundation. I have been playing around with the anchor tag styles but can not find a way to get it to span the full height of the div on hover. When the mouse hovers over, the new red color and shadow should cover the entire gray area. Any ideas? 

<style>
        ul li a:hover {
    background: rgb(204, 0, 0);
    box-shadow: 3px 5px 5px 2px rgba(0,0,0,.2);
    transition: background .4s ease-out, box-shadow .2s ease-in;
}
    </style>
</head>
<body>
     <h1 class="springman"><span style="margin-left: 5px;">Springman Student Website</span></h1>
   <div class="top-bar sticky">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li>
        <a href="#">Schedule</a>
        <ul class="menu vertical">
          <li><a href="#">Discovery</a></li>
          <li><a href="#">Genesis</a></li>
          <li><a href="#">Equinox</a></li>
          <li><a href="#">Summit</a></li>
          <li><a href="#">Infinity</a></li>
          <li><a href="#">Pegasus</a></li>
        
        </ul>
      </li>
      <li><a href="#">Powerschool</a></li>
      <li><a href="#">Makerspace</a></li>
    </ul>
  </div>
</div>