Drop down menu with different background

综合编程 2018-12-07 阅读原文

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>

Problem courtesy of: Darren Riches

Solution

Add the following to your stylesheet:

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

Here's a
JSFiddle

Solution courtesy of: George

Discussion

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>

Discussion courtesy of: Alex

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.

Discussion courtesy of: user2589370

This recipe can be found in it's original form on Stack Over Flow
.

CSS3 Recipes

责编内容by:CSS3 Recipes阅读原文】。感谢您的支持!

您可能感兴趣的

Css: cancel the active link style&qu... i have the following selector in my css: a:active { position: relative; top: 1px; } So every link has this littl...
【兄弟连学Python】 前端之CSS CSS 为了让网页元素的样式更加丰富,也为了让 网页的内容和样式能拆分开 ,CSS由此思想而诞生,CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表。有了CSS,html中大部分表现样式的标...
CSS – Can an image overlap a page border wit... I have the following element in my initial page concept: http://tinyurl.com/bcmcxp9 The ribbon is a ...
The One Valuable Thing All Websites Have: Reputati... Here's something I hear quite a bit when talking about security things: Our site isn't a target, it doesn't have anyth...
Keep a fixed element position when applying a bord... I'm trying to create an online picture framing example. I have an image that can then be customised to show different bo...