html - 为什么当鼠标悬停在 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 之上，因为两者都是绝对定位的，位于 文档和MENU 2中的“相同位置”看起来由于填充，它更靠右。 p>

如果您在菜单周围添加边框，或在浏览器中使用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.