Html 导航栏为什么不'；悬停时没有反应_Html_Css

Html 导航栏为什么不'；悬停时没有反应

html css

Html 导航栏为什么不'；悬停时没有反应,html,css,Html,Css,当我将鼠标悬停在“公司”上时，我的导航栏没有响应（悬停时它应该有显示子菜单），有人能帮我吗？我试过很多方法，但都不管用。这就是我请求你帮助的原因 HTML代码： <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Bobo Web</titl

当我将鼠标悬停在“公司”上时，我的导航栏没有响应（悬停时它应该有显示子菜单），有人能帮我吗？我试过很多方法，但都不管用。这就是我请求你帮助的原因

HTML代码：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Bobo Web</title>
    <link rel="icon" href="img/logo.png">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    <div class="topbar">
      <i class="fa fa-phone"></i>
      <p> Whatsapp: +86-15381188302 </p>
      <i class="fa fa-map-marker" aria-hidden="true"></i>
      <p> Beogard Serbija, 500000</p>
      <div class="icone">
        <i class="fa fa-facebook-square" aria-hidden="true"></i>
        <i class="fa fa-twitter-square" aria-hidden="true"></i>
        <i class="fa fa-youtube-square" aria-hidden="true"></i>
      </div>
    </div>
    <nav>
      <img src="img/logo.png">
      <input type="search" placeholder="Search ...">
      <ul>
        <li><a href="">home</a></li>
        <li><a href="">company  <span class="chevron bottom"></span></a></li>
        <div class="sub-menu-1">     //This submenu doesn't show when it's hovered
          <ul>
            <li><a href="#">News</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Certificate</a></li>
            <li><a href="#">R & D Teams</a></li>
            <li><a href="#">Inovation</a></li>
          </ul>
        </div>
        <li><a href="">products <span class="chevron bottom"></span></a></li>
        <li><a href="">knowledge <span class="chevron bottom"></span></a></li>
        <li><a href="">online store <span class="chevron bottom"></span></a></li>
        <li><a href="">contact us</a></li>
      </ul>
    </nav>
    <img src="img/pozadina.png">
    <p id="p1"> About our compnay</p>
  </body>
</html>

忽略这一点，他们强迫我添加更多文本：

/Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。当前HTML的选择行应该是：

nav ul li:hover + .sub-menu-1 {   /*Not working at all*/

问题：

没有

nav

类，因此它应该是

nav

，而不是

。nav

.sub-menu-1

是兄弟姐妹，而不是孩子，因此您应该使用

（）

不是有效的CSS注释语法，它可能会中断该行的编译

.sub-menu-1

是一个

，它是

的直接子菜单，这是无效的HTML，它应该是

或在中

*{
边际：0px；
填充：0px；
}
.顶杆{
背景色：#1fa9e5；
身高：100%；
宽度：100%；
显示：块；
框大小：内容框；
}
.顶栏*{
字体大小：继承；
行高：继承；
}
.topbar p{
显示：内联块；
右边距：30px；
颜色：白色；
填充：8px0；
}
.fa电话、.fa地图标记、.fa facebook广场、.fa推特广场、.fa youtube广场{
颜色：白色；
}
艾康先生{
浮动：对；
右边距：10px；
}
i.icone i{
填充顶部：6px；
左侧填充：10px；
}
导航{
宽度：100%；
高度：95px；
}
导航ul{
文本对齐：居中；
}
李国荣{
显示：内联块；
填充：40px 40px；
}
海军ulli a{
文本转换：大写；
字体大小：16px；
文字装饰：无；
字体大小：粗体；
颜色：黑色；
}
nav ul li:悬停{
背景：#e0f8f6；
}
导航img{
位置：绝对位置；
高度：70像素；
左侧填充：20px；
填充顶部：10px；
}
雪佛龙先生{
边框样式：实心；
边框宽度：0.25em 0.25em 0；
内容：''；
显示：内联块；
高度：0.45em；
左：0.15em；
位置：相对位置；
顶部：0.15em；
变换：旋转（-45度）；
垂直对齐：顶部；
宽度：0.45em；
排名：0；
变换：旋转（135度）；
}
#p1{
文本转换：大写；
字体大小：42px；
字体大小：粗体；
文本对齐：居中；
填充顶部：80px；
}
导航输入{
浮动：对；
填充：6px；
边缘顶部：30px；
右边距：16px；
边界：无；
字号：17px；
背景#f4；
}
.子菜单-1{
显示：无；
}
导航ulli:悬停+。子菜单-1{/*完全不工作*/
显示：块；
背景：黄色；
边缘顶部：15px；
左边距：-15px；
}

波波网
Whatsapp:+86-15381188302
贝加德塞尔比亚，500000



//此子菜单悬停时不显示













关于我们的公司
我厌倦了加号，它也不起作用。@L.Krapic在上面的演示中起作用了。悬停“company”谢谢，它实际上是有效的，我只是有一个语法错误。
nav ul li:hover + .sub-menu-1 {   /*Not working at all*/