h3和列表下拉菜单CSS3-h3andlistdropdownmenuCSS3

1  

On hover you can only control the CSS of the element you hover over, or the CSS of elements within the element you hover over (one of its children). So you can not make the ul change styles when you hover over the h3 because they 1) are not the same object and 2) do not have a parent-child relationship (they are siblings).

在悬停时,您只能控制悬停在其上的元素的CSS,或者您悬停在其上的元素中的元素的CSS(其中一个子元素)。因此,当您将鼠标悬停在h3上时,您无法进行ul更改样式,因为它们1)不是同一个对象,2)没有父子关系(它们是兄弟姐妹)。

To show the menu when hovering over the h3, you can wrap both of them inside another object (div) and use this for the hover event. To distinguish between the two hovers you can add classnames to both the uls.

要在h3上方悬停时显示菜单,可以将它们包装在另一个对象(div)中,并将其用于悬停事件。要区分两个悬停,您可以为两个悬停添加类名。

See this JSfiddle, or the code below:

看到这个JSfiddle,或下面的代码:

    
Contact
    

        
Home
        
About
        

            Products &＃9662;
            

                
Laptops
                
Monitors
                
Printers
            
        
        
Contact
    

.container ul{
    display: none;
}
.container:hover ul.menu{
    display: block;
}
ul li ul.submenu {
    display: none;
}

ul li:hover ul{
    display: block; /* display the dropdown */
}

1  

In short - you should nest ul inside the h3

简而言之 - 你应该在h3内嵌入ul

    Contact
    

        
Home
        
About
        

            Products &＃9662;
            

                
Laptops
                
Monitors
                
Printers
            
        
        
Contact
    

And in your css:

在你的CSS中:

ul li ul {
    display: none;
}

ul li:hover ul{
    display: block; /* display the dropdown */
}
h3 > ul {
     display: none;
}
h3:hover > ul {
    display: block;
}

Here's the demo: https://jsfiddle.net/mscehjLf/1/

这是演示:https://jsfiddle.net/mscehjLf/1/