下拉菜单在悬停时没有出现问题（只是一个html css模板）

我在为一个简单的下拉菜单编写代码时遇到了麻烦，但我不明白我做错了什么，这对编码来说还是个新概念。每当我将光标移到相应的下拉列表

li

标记上时，悬停颜色效果就在那里，但什么也没有下来。在上一次尝试中，当代码稍有不同时，会出现列表

id

，但它是以

inline

方式出现的，并且是水平对齐而不是垂直对齐的plz帮助

#导航栏{
背景色：#9C9C9C；
保证金：0px 200px 0px 200px；
高度：30px；
溢出：隐藏；
}
#导航{
填充：0px；
边际：0px；
字体系列：arial；
}
#主要{
显示：内联；
}
a{
显示：块；
文本对齐：居中；
浮动：左；
宽度：100px；
填充：3倍；
线高：25px；
文字装饰：无；
颜色：白色；
边际上限：0px；
}
a:悬停{
背景色：#D3；
颜色：黑色；
}
ulli ulli{
显示：无；
}
ul li：悬停ul li{
显示块；
}
#搜索栏{
保证金：5px 5px 0px 0px；
浮动：对；
}

去

首先，将

id=“main”

应用于多个元素<代码>id是唯一的，仅应用于一个元素

其次，您的

悬停

效果有点不完整。请参阅下面我的更改

#导航栏{
背景色：#9C9C9C；
保证金：0px 200px 0px 200px；
高度：30px；
/*溢出：隐藏；如果需要下拉列表，请不要这样做*/
}
#导航{
填充：0px；
边际：0px；
字体系列：arial；
}
#主要{
显示：内联；
}
#导航>李>a{
显示：块；
文本对齐：居中；
浮动：左；
宽度：100px；
填充：3倍；
线高：25px；
文字装饰：无；
颜色：白色；
边际上限：0px；
}
#导航>李>a:悬停{
背景色：#D3；
颜色：黑色；
}
#导航>李{
位置：相对位置；
显示：内联块；
}
#nav>li ul{
显示：无；
位置：绝对位置；
}
#导航>李：悬停{
显示：块；
底部：-80px；
填充：10px；
左：0；
最小宽度：100px；
}
#搜索栏{
保证金：5px 5px 0px 0px；
浮动：对；
}

去

首先，将

id=“main”

应用于多个元素<代码>id是唯一的，仅应用于一个元素

其次，您的

悬停

效果有点不完整。请参阅下面我的更改

#导航栏{
背景色：#9C9C9C；
保证金：0px 200px 0px 200px；
高度：30px；
/*溢出：隐藏；如果需要下拉列表，请不要这样做*/
}
#导航{
填充：0px；
边际：0px；
字体系列：arial；
}
#主要{
显示：内联；
}
#导航>李>a{
显示：块；
文本对齐：居中；
浮动：左；
宽度：100px；
填充：3倍；
线高：25px；
文字装饰：无；
颜色：白色；
边际上限：0px；
}
#导航>李>a:悬停{
背景色：#D3；
颜色：黑色；
}
#导航>李{
位置：相对位置；
显示：内联块；
}
#nav>li ul{
显示：无；
位置：绝对位置；
}
#导航>李：悬停{
显示：块；
底部：-80px；
填充：10px；
左：0；
最小宽度：100px；
}
#搜索栏{
保证金：5px 5px 0px 0px；
浮动：对；
}

去

您需要将显示和隐藏的目标设置为

ul li ul

。。。和#主id不能在同一页上重复。。工作示例如下所示

#导航栏{
背景色：#9C9C9C；
保证金：0px 200px 0px 200px；
高度：30px；
溢出：隐藏；
}
#导航{
填充：0px；
边际：0px；
字体系列：arial；
}
#主要{
显示：内联；
}
a{
显示：块；
文本对齐：居中；
浮动：左；
宽度：100px；
填充：3倍；
线高：25px；
文字装饰：无；
颜色：白色；
边际上限：0px；
}
a:悬停{
背景色：#D3；
颜色：黑色；
}
ul li{显示：继承；}
ul li ul{
显示：无；
宽度：自动；
位置：绝对位置；
顶部：35px；
背景：#ccc；
保证金：0；
填充：0；
}
ul li ul li{显示：块；列表样式类型：无}
ul-li：悬停ul{
显示：块；
z指数：1000；
}
#搜索栏{
保证金：5px 5px 0px 0px；
浮动：对；
}

去

您需要将显示和隐藏的目标设置为

ul li ul

。。。和#主id不能在同一页上重复。。工作示例如下所示

#导航栏{
背景色：#9C9C9C；
保证金：0px 200px 0px 200px；
高度：30px；
溢出：隐藏；
}
#导航{
填充：0px；
边际：0px；
字体系列：arial；
}
#主要{
显示：内联；
}
a{
显示：块；
文本对齐：居中；
浮动：左；
宽度：100px；
填充：3倍；
线高：25px；
文字装饰：无；
颜色：白色；
边际上限：0px；
}
a:悬停{
背景色：#D3；
颜色：黑色；
}
ul li{显示：继承；}
ul li ul{
显示：无；
宽度：自动；
位置：绝对位置；
顶部：35px；
背景：#ccc；
保证金：0；
填充：0；
}
ul li ul li{显示：块；列表样式类型：无}
ul-li：悬停ul{
显示：块；
z指数：1000；
}
#搜索栏{
保证金：5px 5px 0px 0px；
浮动：对；
}

去

您的css应该是这样的

.first .link {
color: black;
transform: rotate(-90deg);
width: auto;
border-bottom: 2px solid #FFFFFF;
position: relative;
top: 0vh;
}
.first {
background: green;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
 }

.menu {
  background-color:red; 
 }

.bottom-line {
  border-bottom:5px solid pink; 
 }



 #navbar{

background-color: #9C9C9C;
margin: 0 auto;
padding: 30px 0;
width: 1200px;


}
#nav{
padding: 0px;
margin: 0px;
font-family: arial;
float: left;
list-style: none;
}
 #main{
  display: inline;
 }
 a{
   display: block;
  text-align: center;
  float: left;
  width: 100px;
  padding: 3px;
  line-height: 25px;
  text-decoration: none;
  color: white;
 margin-top: 0px;
  }
  a:hover{
   background-color: #d3d3d3;
   color: black;
   }

  ul li {
  float: left;
  position: relative;
    }   

 ul li ul {
   display: none;
   position: absolute;
   list-style: none;
  top: 32px;
   z-index: 5;
    background-color: #ddd;
  padding-left: 0;
  } 
  ul li:hover ul {
   display: block;
  }

#searchbar {
   margin: 5px 5px 0px 0px;
  float: right;
 }

---

您还可以看到演示

您的css应该是这样的

.first .link {
color: black;
transform: rotate(-90deg);
width: auto;
border-bottom: 2px solid #FFFFFF;
position: relative;
top: 0vh;
}
.first {
background: green;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
 }

.menu {
  background-color:red; 
 }

.bottom-line {
  border-bottom:5px solid pink; 
 }



 #navbar{

background-color: #9C9C9C;
margin: 0 auto;
padding: 30px 0;
width: 1200px;


}
#nav{
padding: 0px;
margin: 0px;
font-family: arial;
float: left;
list-style: none;
}
 #main{
  display: inline;
 }
 a{
   display: block;
  text-align: center;
  float: left;
  width: 100px;
  padding: 3px;
  line-height: 25px;
  text-decoration: none;
  color: white;
 margin-top: 0px;
  }
  a:hover{
   background-color: #d3d3d3;
   color: black;
   }

  ul li {
  float: left;
  position: relative;
    }   

 ul li ul {
   display: none;
   position: absolute;
   list-style: none;
  top: 32px;
   z-index: 5;
    background-color: #ddd;
  padding-left: 0;
  } 
  ul li:hover ul {
   display: block;
  }

#searchbar {
   margin: 5px 5px 0px 0px;
  float: right;
 }

---

您还可以看到演示

问题的状态如何？如果