为什么当鼠标悬停在CSS上时，我的第一个子菜单不会出现？

Question

有人可以帮助我解决这个问题吗？ 为什么当鼠标悬停在CSS上时，我的第一个子菜单不会出现？

#Menu {
position: absolute;
/*Sets a space allocated between the written word and the edge of the browser.*/
margin:2cm; /*4cm 3cm 4cm;*/
/* Padding moves the links according to the x and y axis*/
padding: 10px 300px;
}

/* This sets the style for all list <li> tags in the HTML code.*/

#Menu li {
/* This sets the style of the bullet points on the list e.g. Roman numerals, circular, square etc. */
list-style: none;
/*This sets the radius of the corners of the background box of the links.*/
/*border-radius: 50px;*/
/*This sets the colour of the background box containing the links.*/
background: #0FF;
}

/* This rule controls the links within the <li> tags.*/

#Menu li a {
/* This tag separates any item/object and tries it like a new paragraph. */
display: block;
/* Padding moves the links according to the x and y axis*/
padding: 3px 8px;
/* This sets all text within its range as all capitals. Other options are none, capitalize 
(which makes the first letter of every word a capital), lowercase and initial 
(which makes the first letter of a word at the beginning of sentence capital and all the rest normal).*/
text-transform: uppercase;
/*This can set the text as underlined, overline, line-through, none, initial and inherit.*/
text-decoration: none; 
/* Sets the default colour of the text.*/
color: #999;
font-weight: bold;
}

#Menu li a:hover {

/*Sets the default colour of the text when the mouse is hovering to get the sub-menu.*/
color: #000;
}

/*This rule hides the <li> from the effects of <ul> unordered list tag. If not implemented the sub-menu will be on constant display.*/

#Menu li ul {
display: none;
}

/*This rule allows the hovering effect to display the sub-menu.*/

#Menu li:hover ul, #Menu li.hover ul {
/*position : fixed will position the element relative to the browser, 
relative means to position relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position,
absolute is positioned relative to its first positioned (not static) ancestor element.*/
position: absolute;
/*display: inline will make the sub-menu appear like a queue of words for example like the way the words of this comment are all queued up.*/
display: inline;
/*Without zeroing the left parameter then the sub-menu would not be directly underneath the main menu headlining. It would of been somewhere to the 
right.*/
left: 0;
/*The width property sets the width of an element. In this case the sub-menu.*/
width: 100%;
/*Sets a space allocated between the written word and the edge of the browser.*/
margin: 0;
/* Padding moves the links according to the x and y axis*/
padding: 10px 300px;
}

#Menu li:hover li, #Menu li.hover li {
/*The float property specifies whether or not an element should float. Without the float it looks like a ordered list without the numbers.*/
float: left;
}

#Menu li:hover li a, #Menu li.hover li a {
/*Sets the default colour of the text when the mouse is hovering to get the sub-menu.*/
color: #000;
}

#Menu li li a:hover {
/*This applies hover colour to the sub-menu.*/
color: #357;
}


#Menu2 {
position: absolute;
/*Sets a space allocated between the written word and the edge of the browser.*/
margin:2cm; /*4cm 3cm 4cm;*/
/* Padding moves the links according to the x and y axis*/
padding: 10px 500px;
}

/* This sets the style for all list <li> tags in the HTML code.*/

#Menu2 li {
/* This sets the style of the bullet points on the list e.g. Roman numerals, circular, square etc. */
list-style: none;
/*This sets the radius of the corners of the background box of the links.*/
/*border-radius: 50px;*/
/*This sets the colour of the background box containing the links.*/
background: #0FF;
}

/* This rule controls the links within the <li> tags.*/

#Menu2 li a {
/* This tag separates any item/object and tries it like a new paragraph. */
display: block;
/* Padding moves the links according to the x and y axis*/
padding: 3px 8px;
/* This sets all text within its range as all capitals. Other options are none, capitalize 
(which makes the first letter of every word a capital), lowercase and initial 
(which makes the first letter of a word at the beginning of sentence capital and all the rest normal).*/
text-transform: uppercase;
/*This can set the text as underlined, overline, line-through, none, initial and inherit.*/
text-decoration: none; 
/* Sets the default colour of the text.*/
color: #999;
font-weight: bold;
}

#Menu2 li a:hover {

/*Sets the default colour of the text when the mouse is hovering to get the sub-menu.*/
color: #000;
}

/*This rule hides the <li> from the effects of <ul> unordered list tag. If not implemented the sub-menu will be on constant display.*/

#Menu2 li ul {
display: none;
}

/*This rule allows the hovering effect to display the sub-menu.*/

#Menu2 li:hover ul, #Menu2 li.hover ul {
/*position : fixed will position the element relative to the browser, 
relative means to position relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position,
absolute is positioned relative to its first positioned (not static) ancestor element.*/
position: absolute;
/*display: inline will make the sub-menu appear like a queue of words for example like the way the words of this comment are all queued up.*/
display: inline;
/*Without zeroing the left parameter then the sub-menu would not be directly underneath the main menu headlining. It would of been somewhere to the 
right.*/
left: 0;
/*The width property sets the width of an element. In this case the sub-menu.*/
width: 100%;
/*Sets a space allocated between the written word and the edge of the browser.*/
margin: 0;
/* Padding moves the links according to the x and y axis*/
padding: 10px 500px;
}

#Menu2 li:hover li, #Menu2 li.hover li {
/*The float property specifies whether or not an element should float. Without the float it looks like a ordered list without the numbers.*/
float: left;
}

#Menu2 li:hover li a, #Menu2 li.hover li a {
/*Sets the default colour of the text when the mouse is hovering to get the sub-menu.*/
color: #000;
}

#Menu2 li li a:hover {
/*This applies hover colour to the sub-menu.*/
color: #357;
}

正如您所看到的，鼠标悬停时会出现第二个子菜单。 感谢您的帮助。

Answer 1

这是因为第二个菜单位于第一个菜单的顶部。

这是因为您使用padding定位absolute定位菜单。你得到这样的东西：

此处 MENU 2 位于 MENU 1 之上，因为两者都位于绝对位置，位于 ＆＃34;文档中的相同位置＆＃34; 和 MENU 2 看起来像它位于右侧，因为填充。

如果在菜单周围添加边框，或在浏览器中使用 Inspect element ，则应该更清楚地了解正在发生的事情。

MENU 2 也位于 MENU 1 之上，而不是相反，因为你有文档中第一个菜单（DOM）之后的第二个菜单 - 您还没有设置z-index。

---

来自您的CSS：

#Menu {
    position : absolute;
    margin   : 2cm;
    padding  : 10px 300px;
}

#Menu2 {
    position : absolute;
    margin   : 2cm;
    padding  : 10px 500px;
}

使用HTML标记的更完整示例可以更轻松地提供帮助。 （与CSS中的评论量减少一样。）

对于快速修复，这应该可行，但我很可能会使用不同的方法：

#Menu {
   z-index  : 200;
}

#Menu2 {
   z-index  : 100;
}

---

你也有很多冗余的造型。您不应该将所有内容都附加到ID上，而应该使用类名，并且只分离菜单之间样式的不同之处。在你的标记中给你这样的东西：

<ul id="menu_1" class="menu">
  ...

<ul id="menu_2" class="menu">
  ...

在你的CSS中，对于常见的样式：

.menu {
    position        : absolute;
    margin          : 10px;
}
.menu li {
    list-style      : none;
    background      : #0FF;
}
.menu li a {
    display         : block;
    padding         : 3px 8px;

... and so on.

然后是每个菜单：

#menu_1 {
    left: 10px;
}

#menu_2 {
    left: 100px;
}

... etc.