Blue Blue - 1 year ago 52
CSS Question

CSS: Css style not being applied to link

I have a frustrating problem, one particular css style is not being applied to a link


The element i am talking about is a hover, which is applied to the header of my sidebar (is also a toggle). The hover applies to the header perfectly, but it also seems to apply to the 1st and 2nd sub-header(in the toggle) also. Which is causing to be a pain.

enter image description here

As you can see from the image above. The grey box(hover) over pending is not meant to be there.

I have changed the div from outside the ul tag to inside, i have renamed the id's and classes, but i cannot get rid of the box. The only way i can 100% get rid of the box is to remove the header:hover from my css, which works but i do not want to do that.

.header:hover {
background-color: #555e60;

<a id="order" class="header" href="#"><h3 id="orderr">Orders</h3></span></a>
<div id="Order_div" style="display: none;">

<ul class="tabs">
<li id='Red' class="order"><a class="sb" href="Franchise-account-orders.php">Overview</a></li>
<li id='Blue' class="order"><a class="sb" href="admin_panel.php">Pending</a></li>
<li id='Green' class="order"><a class="sb" href="admin_panel.php"> Accepted</a></li>
<li id='Purple' class="order"><a class="sb" href="admin_panel.php"> Completed</a></li>
<li id='Yellow' class="order"><a class="sb" href="admin_panel.php"> Declined</a></li>


Answer Source

I found 2 issues in your html:

  1. It looks like there is a broken </span> inside your link.
  2. The other (that is causing the issue) is the h3 inside the link. The browser's default style for the title is overriding your style.

Remove the <h3> and it will work.

Now you can style the <span> the way you want.

Take a look:

<a href='' class='header'><h3>With H3</h3></a>

<a href='' class='header'>Without H3</a>