综合编程

Drop down menu with different background

微信扫一扫,分享到朋友圈

Drop down menu with different background
0

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
.

阅读原文...


微信扫一扫,分享到朋友圈

Drop down menu with different background
0

CSS3 Recipes

Butterknife 8&period;4&period;0 can not find views after the application has been run again...

上一篇

巨头成功背后的心酸:任正非深夜痛哭,马化腾假扮姑娘陪聊

下一篇

评论已经被关闭。

插入图片

热门分类

往期推荐

Drop down menu with different background

长按储存图像,分享给朋友