如何改变与CSS '：悬停'

HTML代码如何改变与CSS '：悬停'

.navbar li { 
 
    color: #B7B7B7; 
 
    font-family: 'Montserrat', sans-serif; 
 
    font-size: 14px; 
 
    min-width: 70px; 
 
    padding: 22px 16px 18px; 
 
} 
 
.navbar #menumain ul { 
 
    width: 120%; 
 
} 
 
.navbar ul ul { 
 
    display: none; 
 
}

<div class="navbar"> 
 
    <li id="menumain"> 
 
    Menu1main 
 
    <ul> 
 
     <a href="/"> 
 
     <li>Menu2</li> 
 
     </a> 
 
    </ul> 
 
    </li> 
 
</div>

如何改变显示：在navbar ul ul无到显示：块与:hover 如何变更显示：无于navbar ul ul至显示：块与:hover？

来源

2016-10-04 I.Nikolaew

你可以将你的代码添加到jsfiddle吗？ – Elyor

李元素必须是ul/ol的子元素，而不是div –

我猜你问的是这样的：

.navbar li:hover ul { 
    display: block; 
}

但你的代码是不明确的。您目前在您的选择器中有.navbar ul ul，但您在标记中的任何位置都没有嵌套ul。

来源

2016-10-04 06:37:58

谢谢，作品:) –

.navbar li:hover ul { 
    display: block; 
}

我猜你的意思是这

编辑：@大卫Hedlund的你是快

来源

2016-10-04 06:45:01

您可以尝试写:hover与DIV类。

.navbar li:hover ul { 
    display: block; 
}

根据你的HTML代码，您不必2 ul代替1 li和1 ul。理想情况下，首先应该是ul，然后是HTML代码中的li。

来源

2016-10-04 06:50:15 Novice

你做错了人。 a> li是一种不好的做法。你需要做LI>一个

.navbar > li > ul { display: none; } 
 
.navbar > li:hover > ul { display: block; }

<div class="navbar"> 
 
    <li id="menumain"> 
 
    Menu1main 
 
    <ul> 
 
     <li><a href="/">item1</a></li> 
 
     <li><a href="/">item2</a></li> 
 
    </ul> 
 
    </li> 
 
</div>

记住HTML W3C验证 错误：一个元素不允许在此背景下元素UL的孩子。（抑制来自该子树的进一步错误。）

来源

2016-10-04 07:05:36 ShadowFoOrm

如何改变与CSS '：悬停'

回答

相关问题