CODEWITHSUNDEEP
htmlcssdrop-down-menustylesheet
Darren Riches
Darren Riches

Reputation: 149

Drop down menu with different background

I have created a CSS drop down menu which can be viewed here: http://jsfiddle.net/7ZWnJ/ and code is pasted below.

Is there anyway I can make the drop down section have a different background colour (eg: red), but main heading stays as orange?

Many thanks,

<!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>
        <style>
            #brands {
                height: 430px;
                overflow-y:auto;
                overflow-x:hidden;
                position: absolute;
                width: 460px;
                z-index: 123;
            }
            #menu {
                z-index: 999;
            }
            ul {
                font-family: Arial;
                font-size: 12px;
                margin: 0;
                padding: 0;
                list-style: none;
                font-weight: bold;
            }
            ul li {
                position: relative;
            }
            li ul {
                display: none;
                width: 133px;
            }
            ul li a {
                display: block;
                text-decoration: none;
                color: #ffffff;
                padding: 3px 15px 3px 15px;
                margin: 0;
                border-top: #f79448 1px solid;
                border-bottom: #f79448 1px solid;
            }
            ul li a:hover {
                z-index: 1000;
                background-color: #F79448;
            }
            li:hover ul {
                display: block;
                position: absolute;
                z-index: 1000;
                width: 134px;
                margin-left: -3px;
            }
            li:hover li {
                font-size: 12px;
            }
            li:hover a {
                background-color: #F79448;
            }
            li:hover li a:hover {
            }
        </style>
    </head>

    <body>
        <table border="0" cellpadding="3" cellspacing="0">
            <tr class="nav-links">
                <td width="128" height="18" align="center" bgcolor="#f79448">
                    <ul id="menu2">
                        <li class="2"><a href="#">OPTION 1</a>

                            <ul>
                                <li><a href="#">OPTION 2</a>
                                </li>
                                <li><a href="#">OPTION 3</a>
                                </li>
                                <li><a href="#">OPTION 4</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </td>
            </tr>
        </table>
    </body>
</html>

Upvotes: 0

Views: 211

Answers (3)

George
George

Reputation: 36784

Add the following to your stylesheet:

#menu2 li ul li a{background:#F00; border-color:#F00}

Here's a JSFiddle

Upvotes: 3

Alex
Alex

Reputation: 5685

Given that your menu is an unordered list (ul), you can just add a different class to the elements you want to distinguish (li).

I.e. in CSS:

li.diff {
    background-color: #FF0000;
}

And in HTML:

<li class="diff"><a href="#">OPTION 2</a></li>

Upvotes: 0

user2589370
user2589370

Reputation:

Through CSS, the best way is to give you heading li tag an id and set all li items colors except the heading as red.

However, if you want to do this as the headings change, and in your JavaScript, you could keep track of which list item is the "head" and every time "head" changes, change the background colors accordingly.

Upvotes: 0

Related Questions