Issue with HTML/CSS tab when it hover or active

Question

I am facing an issue with a tab. You can see the link here below:

<div class="dm-main-tab-menu">
    <ul>
        <li class="Content active"><a accesskey="1" href="?content">Content</a></li>

        <li class="Objects"><a accesskey="1" href="?library">Libraries</a></li>

        <li class="Forms"><a accesskey="1" href="?applications">e-Forms</a></li>

        <li class="Reports"><a accesskey="1" href="?statistics">Statistics</a></li>

        <li class="Settings"><a accesskey="1" href="?settings">Settings</a></li>    
    </ul>
</div>

jsFiddle

As you can see the Second tab which is "Libraries" when hovering it, the icon is not visible and also the same issue for active.

Can someone please help me to fix this issue?

Answer 1

This is how your code looks like.

/* Library Starts */

.dm-main-tab-menu > ul > li.Objects {

color: #ffffff;

background:url(https://cdn3.iconfinder.com/data/icons/glypho-free/64/cog-settings-alt-16.png)  22px 0px no-repeat !important; // Link working fine

padding:0px 0px 9px 0px;

margin:11px 0px 0px 3px;

}

.dm-main-tab-menu > ul > li.Objects > a:hover {

color: #ffffff;

background:url(gNew/Main/library_hover.gif) no-repeat 22px 12px !important; // Directory doesn't working

}

.dm-main-tab-menu > ul > li.Objects > .active {

color: #ffffff;

background:url(gNew/Main/library_hover.gif) no-repeat 22px 12px !important; // Directory doesn't working
}

---

This is how it looks after being fixed.

/* Library Starts */

.dm-main-tab-menu > ul > li.Objects {

color: #ffffff;

background:url(https://cdn3.iconfinder.com/data/icons/glypho-free/64/cog-settings-alt-16.png)  22px 0px no-repeat !important;

padding:0px 0px 9px 0px;

margin:11px 0px 0px 3px;

}

.dm-main-tab-menu > ul > li.Objects > a:hover {

color: #ffffff;

background:url(https://cdn3.iconfinder.com/data/icons/glypho-free/64/cog-settings-alt-16.png) no-repeat 22px 12px !important; // Replaced directory with link.

}

.dm-main-tab-menu > ul > li.Objects > .active {

color: #ffffff;

background:url(https://cdn3.iconfinder.com/data/icons/glypho-free/64/cog-settings-alt-16.png) no-repeat 22px 12px !important; // Replaced directory with link.
}

It think basically the problem is with directory, It doesn't getting the directory that your giving in "hover and active' css code. So I replced that directory with link and it works fine.

---

Also you can't use.

<li class="Content active"></li> - will not work.

A class should be without spaces, So you can use hyphens like this.

<li class="Content-active"></li> - It will work.

Answer 2

Replace this:

.dm-main-tab-menu > ul > li.Objects > a:hover {
    color: #ffffff;
    background:url(gNew/Main/library_hover.gif) no-repeat 22px 12px !important;
}

For this:

.dm-main-tab-menu > ul > li.Objects > a:hover {
    color: #ffffff;
    background:url(https://cdn3.iconfinder.com/data/icons/glypho-free/64/cog-settings-alt-16.png) no-repeat 22px 12px !important;
}

You are effectively setting the background of your Objects element to something else, which is not the effect you desire (according to your question). Instead leave it as is and let :active do something else for you if you desire, from there on is up to your personal implementation.