How do I change the background color of the links in my header's navigation upon hover? (image provided)

[celuva2017]

How do I change the background color of the links in my navigation header when I hover over them? I've changed the font color (as you can see in the image- it changes from its original blue to orange text when I hover), but I can't change the background color of the link. As you see now in the "My Requests" link below, it's currently a lighter gray when you hover, but I want it to change to white instead. Can provide code if needed. Thanks!

[brianrichards]

There should be no need for additional HTML if in fact the menu is constructed the same way as the header widget.

If you're adding the code directly to the header, then you might be able to simplify it and assume you're only going to have the one UL in the document:

ul li:hover {

    background-color: yellow;

}

As long as the menu items are in a UL you should be good to go.

[celuva2017]

Thanks, Brian. They're actually within the body of a table:

<tbody>

                      <tr>

                        <td style="font-size: 11.25pt; color:#002f6c; background-color:#DADADA; padding-top: 0px;">

                          <div sp-navbar-toggle="" class="collapse navbar-collapse navbar-left" id="sp-nav-bar" style="margin-left: 30px; width=100%">

          <!-- Include The Menu -->

          <sp-widget widget="data.menu"></sp-widget>

          <ul ng-if="::(!user.logged_in && page.id != portal.login_page_dv && !data.hasLogin)" class="nav navbar-nav">

              <li><a href ng-click="openLogin()">${Login}</a></li>

          </ul>

          <ul ng-if="::user.logged_in" class="nav navbar-nav">

              <!-- chat, avatar, and logout -->

              <li ng-if="::data.connect_support_queue_id"><a href ng-click="openPopUp()">${Live Chat}</a></li>

              <li class="dropdown hidden-xs">

                  <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">

                      <span class="navbar-avatar"><sn-avatar class="avatar-small-medium" primary="userID" /></span>

                      <span class="visible-lg-inline">{{::user.name}}</span>

                  </a>

                  <ul class="dropdown-menu">

                      <li><a ng-href="?id=user_profile&sys_id={{::user.sys_id}}">${Profile}</a></li>

                      <li><a href="{{::portal.logoutUrl}}">${Logout}</a></li>

                  </ul>

              </li>

              <li class="visible-xs-block"><a ng-href="?id=user_profile&sys_id={{::user.sys_id}}"><span class="navbar-avatar"><sn-avatar class="avatar-small-medium" primary="userID" /></span>{{::user.name}}</a></li>

              <li class="visible-xs-block"><a href="{{::portal.logoutUrl}}">${Logout}</a></li>

          </ul>

      </div>

                          </td>

                      </tr>

                  </tbody>

[celuva2017]

Any other suggestions for why it may not be working? I added your CSS and nothing changed (likely because they aren't within a ul or li in my code) but instead in the " <sp-widget widget="data.menu"></sp-widget>"- I'm wondering if it's just somewhere in the code already that I don't see that makes it turn light gray, or if it lives somewhere else outside of the header widget where I haven't looked for it.

Thanks,

Claire