Menu icon Foundation
top bar not showing hover effect

hi guys im wondering why my default top bar is not showing the hover lighten effect that I thought it should show by default. Is there a scss setting i need to change or anything? here is my topbar code:

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>
    <link rel="stylesheet" href="stylesheets/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
  </head>
  <body>
   <nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li><a href="../about.html">About OFL</a></li>
      <li><a href="#">Request Info</a></li>
      <li><a href="#">Enroll Now</a></li>
      <li class="has-dropdown">
        <a href="#">Class Schedule</a>
        <ul class="dropdown">
          <li><a href="#">English</a></li>
          <li><a href="#">Math</a></li>
          <li><a href="#">Language</a></li>
          <li><a href="#">Science</a></li>
          <li><a href="#">Social Studies</a></li>
          <li><a href="#">Other</a></li>
          
        </ul>
      </li>
    </ul>

    <!-- Left Nav Section -->
    <ul class="left">
      <li><a href="#">Social Media Links</a></li>
    </ul>
  </section>
</nav>
   <div class="bgwrap">
    <div class="row">
      <div class="large-12 columns">

   
    <h3 class="logo">Logo</h3>

            

         

topbar

hi guys im wondering why my default top bar is not showing the hover lighten effect that I thought it should show by default. Is there a scss setting i need to change or anything? here is my topbar code:

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>
    <link rel="stylesheet" href="stylesheets/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
  </head>
  <body>
   <nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li><a href="../about.html">About OFL</a></li>
      <li><a href="#">Request Info</a></li>
      <li><a href="#">Enroll Now</a></li>
      <li class="has-dropdown">
        <a href="#">Class Schedule</a>
        <ul class="dropdown">
          <li><a href="#">English</a></li>
          <li><a href="#">Math</a></li>
          <li><a href="#">Language</a></li>
          <li><a href="#">Science</a></li>
          <li><a href="#">Social Studies</a></li>
          <li><a href="#">Other</a></li>
          
        </ul>
      </li>
    </ul>

    <!-- Left Nav Section -->
    <ul class="left">
      <li><a href="#">Social Media Links</a></li>
    </ul>
  </section>
</nav>
   <div class="bgwrap">
    <div class="row">
      <div class="large-12 columns">

   
    <h3 class="logo">Logo</h3>

            

         
Rafi Benkual about 4 years ago

You can change the hover color. The default top-bar has the color on hover state set to the default color.

example: http://codepen.io/rafibomb/pen/KwGeVO

.top-bar-section li:not(.has-form) a:not(.button):hover {
  background: #777;
}

Ryan Hellerud about 4 years ago

I haven't changed any of the settings but i do not have any hover effect by default for some reason, any idea what happened? Also, my hover effect even with the added code you provided does not show on the drop down menu. Funny thing though, the tabs do have the default hover effect, just not the top bar for some reason.
Here is all my scss:

@import "settings";
@import "foundation";

.bgwrap{
  background: -webkit-linear-gradient(#1e90ff, white); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#1e90ff, white); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#1e90ff, white); /* For Firefox 3.6 to 15 */
  background: radial-gradient( #1e90ff, white ); /* Standard syntax *///#008CBA teal #ADD8E6,
}

p{
//    font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
    font-family: Verdana, Geneva, sans-serif;

}
.tabs dd > a, .tabs .tab-title > a{

padding: 1rem 2.75rem; //5.33rem;
}

.button{
//padding:1rem 1.5rem;
    margin: 0 1.37rem;
}
.floatright{
float: right;
    display: inline-block;
}
.parent{display:inline-block; padding:1rem 5rem;}
.student{display: inline-block;}
.logo{display:inline-block; float: left; padding: 1rem;}
.headtext{
color: #FFA500;
}

iframe{
width: 400px;
height:297px;
//float:;
}
    <ul class="tabs" data-tab>
            <li class="tab-title active"><a href="#panel1">Mission</a></li>
            <li class="tab-title"><a href="#panel2">Goals</a></li>
      <li class="tab-title"><a href="#panel3">Courses</a></li>
      <li class="tab-title"><a href="#panel4">Programs</a></li>
      <li class="tab-title"><a href="#panel5">Academics</a></li>
      <li class="tab-title"><a href="#panel6">Support</a></li>
    </ul>
<div class="tabs-content">
<!--
  <div class="content active" id="panel1">
   <div class="row">
       <div class="large-6 columns">

       </div>
    <iframe src="https://www.youtube.com/embed/AqoTzHaNhos">

       </iframe>
         http://www.youtube.com/embed/aiBt44rrslw
   </div>
   <a href="#" class="button info round">Learn More</a>
   <a href="#" class="button success round">Sign Up</a>
  </div>
-->
  <div class="content active" id="panel1">
   <div class="row">
       <div class="large-6 columns">

Rafi Benkual about 4 years ago

This is the CSS for the dropdown hover color:

.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button):hover {
  background: red;
}

http://codepen.io/rafibomb/pen/XJyajO