Html 如何使用定位和CSS在下拉菜单上显示子菜单？_Html_Css

Html 如何使用定位和CSS在下拉菜单上显示子菜单？

html css

Html 如何使用定位和CSS在下拉菜单上显示子菜单？,html,css,Html,Css,我有这个简单的导航菜单为我的设计。但问题是我不能在悬停时显示子菜单。有什么办法解决这个问题吗？还是我的CSS缺少一些样式 nav ul{列表样式类型：无；溢出：隐藏；背景：#000；位置：相对；} 导航li{浮动：左；} 导航li>a{填充：15px 15px；显示：内联块；文本装饰：无；颜色：白色；文本对齐：中心；} 导航li>a:hover{背景：紫色；} 导航ul{位置：绝对；背景：绿色；顶部：100%；} 导航ulli>a:hover{color:red；} 样品UL

我有这个简单的导航菜单为我的设计。但问题是我不能在悬停时显示子菜单。有什么办法解决这个问题吗？还是我的CSS缺少一些样式

nav ul{列表样式类型：无；溢出：隐藏；背景：#000；位置：相对；}
导航li{浮动：左；}
导航li>a{填充：15px 15px；显示：内联块；文本装饰：无；颜色：白色；文本对齐：中心；}
导航li>a:hover{背景：紫色；}
导航ul{位置：绝对；背景：绿色；顶部：100%；}
导航ulli>a:hover{color:red；}


样品UL

nav-ul{
列表样式类型：无；
溢出：隐藏；
背景：#000；
位置：相对位置；
}
李海军{
浮动：左；
}
导航李>a{
填充：15px 15px；
显示：内联块；
文字装饰：无；
颜色：白色；
文本对齐：居中；
}
导航李>a:悬停{
背景：紫罗兰色；
}
导航ul{
背景：绿色；
最高：100%；
}
nav ul li a+ul{
显示：无；
}
导航ul li a：悬停+ul{
显示：块；
}
.子菜单：悬停{
显示：块；
}


样品UL

试试这个。你可以从中学习


保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
}
李{
浮动：左；
}
李安，.dropbtn{
显示：内联块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
li a:悬停，.下拉：悬停.dropbtn{
背景色：红色；
}
li.下拉列表{
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.下拉内容a:悬停{背景色：#f1f1}
.下拉：悬停.下拉内容{
显示：块；
}






导航栏中的下拉菜单
将鼠标悬停在“下拉”链接上以查看下拉菜单

您的代码中有很多错误。最关键的是子菜单容器上的

top:100%

，它将其移出可见区域

除此之外，将子菜单标题

li

定义为

position:relative

，子菜单

ul

本身在默认情况下

display:none

和悬停

display:block

，这一点很重要。并将子菜单容器放入用作其标题的

li

。请参见下面的我的代码：

nav-ul{
列表样式类型：无；
背景：#000；
}
李海军{
显示：内联块；
位置：相对位置；
}
导航李>a{
填充：15px 15px；
显示：内联块；
文字装饰：无；
颜色：白色；
文本对齐：居中；
}
导航李>a:悬停{
背景：紫罗兰色；
}
nav ul li ul{
显示：无；
位置：绝对位置；
顶部：45px；
左：0px；
宽度：100px；
溢出：可见；
填充：0；
}
导航ulli：悬停ul{
显示：块；
}
李国宝{
背景：绿色；
显示：块；
}
导航ulli>a：悬停{
颜色：红色；
}


样品UL

希望这对您有所帮助。

可能的副本

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>sample UL</title>
    <style media="screen">
    </style>
  </head>
  <body>
    <nav class="cf">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Menu 1</a>
          <ul class="submenu">
            <li><a href="#">submenu 1</a></li>
            <li><a href="#">submenu 2</a></li>
          </ul></li>
      </ul>
    </nav>
  </body>
</html>

.cf:before, .cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

.cf {
    zoom:1;
}

nav {
    background: #333A31;
    height: 2.3em;
}
ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}
ul {
    background: #D5333C;
    height: 2em;
    width: 100%;
}
li {
    position: relative;
}
li a {
    display: block;
    line-height: 2em;
    padding: 0 1em;
    color: white;
    text-decoration: none;
}
li a:hover {
    background: #9155311;
    height: 2em;
    padding-top: .3em;
    position: relative;
    top: -.3em;
    border-radius: .3em .3em 0 0;
}
.current, a:hover.current {
    background: #AD9B7F;
    color: #eee;
    padding-top: .3em;
    border-radius: .3em .3em 0 0;
    position: relative;
    top: -.3em;
    border-bottom: .3em solid #917F63;
    cursor: default;
}
/*dropdown menu styles*/
ul.submenu {
    float: none;
    background: #916A31;
    width: auto;
    height: auto;
    position: absolute;
    top: 2em;
    left: -9000em;
}
ul.submenu li {
    float: none;
}
nav li:hover ul {
    left: 0;
}
ul.submenu li a {
    border-bottom: 1px solid white;
    padding: .2em 1em;
    white-space: nowrap;
}
ul.submenu li:last-child a {
    border-bottom: none;
}
ul.submenu li a:hover {
    background: #D5973C;
    height: 2em;
    padding-top: .2em;
    top: 0;
    border-radius: 0;
}