Question

我在下拉菜单中工作，当我将鼠标悬停在特定的锚点上时，它会删除菜单列表，但是当用户将鼠标悬停在Cusit菜单上时，下拉菜单显示无法正常工作。请帮帮我。这是我的HTML。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Cusit</title>
</head>
    <body>
     <!-- starting of Navbar menu -->
    <nav id="navigation">
     <!-- starting of social navigation icons -->
        <div id="social_navigation">
           <a href="www.facebook.com"><img src="images/facebook.png" alt="facbook"></a>
           <a href="www.facebook.com"><img src="images/twitter.png" alt="facbook"></a>
           <a href="www.facebook.com"><img src="images/linkedin.png" alt="facbook"></a>
        </div>
        <!-- end of social navigation icons -->
        <div id="menu">
        <a href="#">Home</a>
        <a href="#">Contact us</a>

        <a href="#" id="submenu">Cusit</a>
         <ul id="drop">
                    <li><a href="#" title="Sub Nav Link 1">Sub Nav Link 1</a></li>
                    <li><a href="#" title="Sub Nav Link 2">Sub Nav Link 2</a></li>
                    <li><a href="#" title="Sub Nav Link 3">Sub Nav Link 3</a></li>
                    <li><a href="#" title="Sub Nav Link 4">Sub Nav Link 4</a></li>
                    <li class="last"><a href="#" title="Sub Nav Link 5">Sub Nav Link 5</a></li>
         </ul>      
        <a href="#">Welcome</a>
        <a href="#">cutec</a>
        </div>
    </nav>
     <!-- End of Navbar menu -->

      <!-- Start of Clearfixing the border -->
         <div id="borderbottom"></div>
       <!-- end of Clearfixing the border -->
     <!-- Starting of jumbotron ITEMS-->
     <div class="jumbotron">
     <img src="images/logo.png" alt="Central Image" id="imagework">
     </div>
     <!-- End of jumbotron ITEMS-->

     <!-- starting of MAin Container-->
     <div id="container">

     </div>
     <!-- starting of MAin Container-->
    </body>
</html>

这是css代码。

/* initail setup of the body padding and margin */
body{margin:0px; padding:0px; font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif; font-size:12px;}


#navigation>#menu>a:nth-child(3):hover{color:#00F;}

#navigation>#menu:hover>ul { display:block; }
/* starting of navigation bar */
#navigation {
position: fixed;
top: 0;
width: 100%;
color: #000;
height: 35px;
text-align: center;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 1px 0px #000000;
-moz-box-shadow: 0px 0px 1px 0px #000000;
box-shadow: 0px 0px 1px 0px #000000;
/* Adds the transparent background */
background-color:#f0eeef;
color: rgba(1, 1, 1, 0.8);
}

#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: #000;
text-decoration: none;
}

#navigation a:hover {
color: red;
} 

/* start of sub menu */
#navigation ul{ display:none; width:10%; position:absolute; left:0; background:#FFFFFF; }
#navigation ul li { float:none; }
#navigation ul a { padding:5px 10px; border-left:none; border-right:none; font-size:14px; }
#navigation ul a:hover { color: #F90; }
/* End of sub menu */

/* start of social navigation */
    #social_navigation{float:left; }
/* End of Social Navigation */

/* start of Menu Setting */
    #menu{margin-right:248px;}
/* end of Menu Settig */

/*Creating genral purpose border bottom*/
#borderbottom{color:#F00; border-bottom:2px solid; margin-top: 51px;}
/*End of genral purpose border bottom*/



.jumbotron{padding:30px;margin-bottom:10px;color:inherit;background-color:#eee; margin-top:0px;}
.jumbotron>img{margin-left:45em;}

Here is the fiddle

Answer 1

你需要在选择器上使用+：

#navigation>#menu>a:nth-child(3):hover +ul{ display:block; }

http://jsfiddle.net/6gLt8mfh/

Answer 2

改变这一点（第6行）：

#navigation > #menu:hover > ul { 
    display:block; 
}

对此：

#navigation > #menu > #submenu:hover + ul { 
    display:block; 
}

CSS中的+符号定位下一个项目，这是您想要的。

JSFiddle

下拉列表不能与第n个子选择器一起使用

2 个答案: