在其他样式上加载CSS样式

Question

I have a index.php, with a menu, I want to see the class menuitem:hover active when I'm over the item with the class (link), but I also want to see the class menuitem:hover active when I'm hover other li of the link menu. 我有一个带菜单的index.php，我要在类（链接）上的项目上方看到menuitem：hover类，但我也想在我看到菜单项classitem：hover处于活动状态m将鼠标悬停在链接菜单的其他位置。 Ok, I will explain that With the real example: 好的，我将通过实际示例进行说明：

I have a dropdown menu. 我有一个下拉菜单。 When you're over the top link it generates a border from the bottom of the top link, but when you're on the dropdown menu of this top link the border disappears because you're hover the dropdown not over the link. 当您位于顶部链接上方时，它会从顶部链接的底部生成边框，但是当您位于该顶部链接的下拉菜单上时，边框会消失，因为您将鼠标悬停在该链接上方。 I want to see the border when you're on the dropdown and when you're over the link. 当您在下拉列表中以及在链接上方时，我希望看到边框。

Here is the code. 这是代码。 But NOTE you can see better in action (I know is a bit difficult to understand the problem). 但是请注意，您可以在操作中看到更好的效果（我知道很难理解这个问题）。

index.php: index.php：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
    <head>
        <link type="text/css" rel="stylesheet" href="./lib/css/layout.css" media="all">
    </head>

    <body>

    <div id="headerbar">
        Hello World
    </div>

    <div id="mainmenu-bar">
        <div id="mainmenu-content">
            <img src="./lib/images/logo.png" height="75" width="75" style="float:left;margin-top:5px;">
            <h1 style="color:white; float:left; margin-bottom:0px; display:inline-block;">Title</h1>

            <div id="mainmenu">
                <ul>
                    <li>
                        <a href="#">Inicio</a>
                    </li>
                    <li>
                        <a class="menuitem" href="#">Acerca de</a>
                            <ul>
                                <li><a href="#">Producto</a></li>
                                <li><a href="#">Nosotros</a></li>
                            </ul>
                    </li>
                    <li>
                        <a class="menuitem" href="#">Servicios</a>
                        <ul>
                            <li><a href="#">Servicio uno</a></li>
                            <li><a href="#">Servicio dos</a></li>
                            <li><a href="#">Servicio tres</a></li>
                            <li><a href="#">Servicio cuatro</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div id="content">
        <h1 color="white">Hello World</h1>
    </div>

    </body>
</html>

layout.css layout.css

@font-face{font-family: Maven Pro; src: url(../fonts/MavenPro-Regular.ttf);}

body{font-family:Maven Pro; background:#ECECEC; border:0; font-size:100%; vertical-align:baseline; margin:0; padding:0;}

#headerbar{height:30px; float:right; margin-right:20px; margin-top:5px;}

/*MAIN MENU BAR*/
#mainmenu-bar{background:#4C84BC; width:100%; height:90px; overflow: hidden;}
#mainmenu-content{margin: 0 auto; width:1000px;}
#mainmenu{margin-top:35px; display:inline-block;}
#mainmenu ul li{float: left; margin-right: 20px; list-style: none;}
#mainmenu ul li a {color:#FFF; text-decoration: none;}
#mainmenu ul li a:hover {color: #474747;}
#mainmenu ul ul {display: none; padding: 0px; position: absolute; width: auto; margin-left: 0px;}
#mainmenu ul li:hover>ul {background: #fff; width:220px; border-right:1px solid #a4a4a4; margin-top:21px; z-index:9; position: absolute; box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.3); -o-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3); border-top:3px solid #FCD100; display: block;}
#mainmenu ul ul li {float: none;position: relative; text-decoration: none; display: block;}
#mainmenu ul ul li a{text-decoration: none;}
.menuitem {padding:11px 15px 17px;}
.menuitem:hover{border-bottom:6px solid #FCD100;}

I know that do this maybe onli will be possible with JQuery but if is with CSS3 better. 我知道这样做也许只能通过JQuery来实现，但是如果与CSS3更好的话。

Answer 1

in order to see the border when you're on the dropdown and when you're over the link. 以便在下拉菜单和链接上方查看边框。 add the same class ".both-element" for both elements. 为两个元素添加相同的类“ .both-element”。

.both-element:hover{border-bottom:6px solid #FCD100;}

Answer 2

try adding the following rule: 尝试添加以下规则：

.menuitem li:hover{border-bottom:6px solid #FCD100;}

or even this to make both obey the same rule: 甚至使两者都遵循相同的规则：

.menuitem:hover,
.menuitem li:hover
{
    border-bottom:6px solid #FCD100;
}

在其他样式上加载CSS样式

问题描述

2 个解决方案

解决方案1
0 2014-01-16 21:48:18

解决方案2
0 已采纳

在其他样式上加载CSS样式

问题描述

2 个解决方案

解决方案1 0 2014-01-16 21:48:18

解决方案2 0 已采纳

解决方案1
0 2014-01-16 21:48:18

解决方案2
0 已采纳