Jump to content

Recommended Posts

Hello,

 

I'm trying to make it so that when I hover over the Main Tab on a drop down menu it changes color, and while you're going through the other options on the drop down, the main tab still stays coloured.

 

Thats probably the best way I can explain it.

 

If you can help me, it would be greatly appriciated.

 

Thanks,

Andy.

Link to comment
https://forums.phpfreaks.com/topic/252698-drop-down-menu-styling/
Share on other sites

I know that.

 

I have the hover working, however, when I hover over the main tab and go through the subtabs, I want the main one to stay as if its hovered over.

 

Example:

 

- Community

    - Link Here

    - Link Here

    - Link Here

 

If I hover over Community, the background turns black.

 

If I move onto the "Link Here", It goes back to normal, whereas I want the "Community" part to always stay black until they've either clicked one of the links or gone off it.

I'm trying to make it so that when I hover over the Main Tab on a drop down menu it changes color, and while you're going through the other options on the drop down, the main tab still stays coloured.

 

If you can work with two background colors, you can do it this way:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
li ul {
    display: none;
}
li:hover ul {
    display: block;
}
li:hover {
    background: yellow;
}
li:hover ul {
    background: white;
}
</style>
</head>
<body>
<ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a>
        <ul>
            <li><a href="#">Link 2-1</a></li>
            <li><a href="#">Link 2-2</a></li>
            <li><a href="#">Link 2-3</a></li>
        </ul>
    </li>
    <li><a href="#">Link 3</a></li>
</ul>
</body>
</html>

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.