[SOLVED] Highlight Problem in Drop Down

soundsofchewelah · #1 (**permalink**) 02-01-09, 11:58 PM

Hi everyone! I'll try to make this short and sweet. I'm having problems trying to highlight the links (when the mouse rolls over each link) in the drop down menu. I found this CSS menu, and added a suckerfish style drop down to the menu. The drop down works perfectly, but the two tab images (that are used when you move the mouse over the main links) appear when you move the mouse over the sub links. What I am trying to figure out is how to fix it so that when you move the mouse over the sub links, a simple color highlight would appear instead of the tab images.

Here's the first pic which just shows you the tab images that are used to highlight the main menu link.
http://h1.ripway.com/soundsofchewelah/mainsec.jpg

Here's the second pic that shows what happens when I move the mouse over one of the sub links. As you can see, it's using the same tab images to highlight the link.
http://h1.ripway.com/soundsofchewelah/subsec.jpg

HTML

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <body>
    <head>
        <link href="styletest.css" rel="stylesheet" type="text/css">
    </head>
        
        <ul class="glossymenu">
            <li>
                <a href="#"><b>Home</b></a>
            </li>
            <li>
                <a href="#"><b>News</b></a>
                    <ul>
                        <li>
                            <a href="#"><b>Local</b></a>
                        </li>
                        <li>
                            <a href="#"><b>National</b></a>
                        </li>
                        <li>
                            <a href="#"><b>Archives</b></a>
                        </li>
                    </ul>
            </li>
            <li>
                <a href="#"><b>Main Link 3</b></a>
                    <ul>
                        <li>
                            <a href="#"><b>Sub Link 1</b></a>
                        </li>
                        <li>
                            <a href="#"><b>Sub Link 2</b></a>
                        </li>
                        <li>
                            <a href="#"><b>Sub Link 3</b></a>
                        </li>
                        <li>
                            <a href="#"><b>Sub Link 4</b></a>
                        </li>
                    </ul>
                </li>
            <li>
                <a href="#"><b>Main Link 4</b></a>
                    <ul>
                        <li>
                            <a href="#"><b>Sub Link 1</b></a>
                        </li>
                        <li>
                            <a href="#"><b>Sub Link 2</b></a>
                        </li>
                        <li>
                            <a href="#"><b>Sub Link 3</b></a>
                        </li>
                    </ul>
            </li>
            <li>
                <a href="#"><b>Main Link 5</b></a>
                    <ul>
                        <li>
                            <a href="#"><b>Sub Link 1</b></a>
                        </li>
                        <li>
                            <a href="#"><b>Sub Link 2</b></a>
                        </li>
                    </ul>
            </li>
            <li>
                <a href="#"><b>Main Link 6</b></a>
            </li>
            <li>
                <a href="#"><b>Main Link 7</b></a>
            </li>
        </ul>
    </body>
</html>

CSS

Code:

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

ul li ul {
    visibility:hidden;
}

ul li:hover ul {
    visibility:visible;
}

li {
  float: left;
  position: relative;
  }

li ul {
  display: block;
  position: absolute; 
  top: 1em;
  left: 0;
  right: 0;
  }
  
li > ul {
    top: 36px;
    left: auto;
    }

li:hover ul { display: block;
  background: #827961;
  background-image: none;
    }


.glossymenu {
    position: relative;
    padding: 0 0 0 0px;
    margin: 0 auto 0 auto;
    background: url(images/menu_bg.gif) repeat-x; /*tab background image path*/
    height: 46px;
    width: 800px;
    list-style: none;
}

.glossymenu li{
    float:left;
}

.glossymenu li a{
    float: left;
    display: block;
    color:#000;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
    padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
    height: 46px;
    line-height: 46px;
    text-align: center;
    cursor: pointer;    
}

.glossymenu li a b{
    float: left;
    display: block;
    padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
    color: #fff;
    background: url(images/menuhover.gif) no-repeat; /*left tab image path*/
    background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
    color: #fff;
    background: url(images/menuhoverright.gif) no-repeat right top; /*right tab image path*/
}

Yeroon · #2 (**permalink**) 02-02-09, 03:32 AM

Add an extra style to your css:

Code:

/*sub*/
/*sub*/
            .glossysub li a
            {
                float: left;
                display: block;
                color: #000;
                text-decoration: none;
                font-family: sans-serif;
                font-size: 13px;
                font-weight: bold;
                padding: 0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
                height: 46px;
                line-height: 46px;
                text-align: center;
                cursor: pointer;
            }
            .glossysub li a b
            {
                float: left;
                display: block;
                padding: 0 24px 0 8px; /*Padding of menu items*/
            }
            .glossysub li.current a, .glossysub li a:hover
            {
                color: #00FF00;
                background: url(images/menuhover.gif) no-repeat; /*left tab image path*/
                background-position: left;
            }
            .glossysub li.current a b, .glossysub li a:hover b
            {
                color: #00FF00;
                background: url(images/menuhoverright.gif) no-repeat right top; /*right tab image path*/
            }

Change the images in the substyle to the images you want, or just remove them en put color codes in there.

Then make html structure like this:

Code:

<ul class="glossymenu">
        <li><a href="#"><b>Home</b></a> </li>
        <li><a href="#"><b>News</b></a>
            <ul class="glossysub">
                <li><a href="#"><b>Local</b></a> </li>
                <li><a href="#"><b>National</b></a> </li>
                <li><a href="#"><b>Archives</b></a> </li>
            </ul>
        </li>
</ul>

soundsofchewelah · #3 (**permalink**) 02-02-09, 02:13 PM

THANK YOU Yeroon! It worked beautifully.

You know what's funny is that I actually gave the sub menu its own class when I was trying to figure this out myself. I did the exact same thing you did, but I must had a mistake in the code somewhere so it didn't work.

SOLVED!

Yeroon · #4 (**permalink**) 02-03-09, 02:06 AM

Great that you got it working

If you consider this solved, you can always mark this thread Solved by using the Thread Tools menu at the top of the starting post.