Why does my first sub-menu not appear when the mouse is hovering over it in CSS?

Question

Can someone help me with this problem I'm having please? Why does my first sub-menu not appear when the mouse is hovering over it in 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;
}

As you can see the second sub-menu does appear when the mouse is hovering. Thank you for your help in that matter.

Answer 1

It is because the second menu is atop the first one.

This is because you use padding to position absolute positioned menus. You get something like this:

Here MENU 2 is above MENU 1 because both are positioned absolute, placed at the "same spot" in the document and MENU 2 looks like it is further to the right due to the padding.

If you add a border around the menus, or use Inspect element in your browser, you should most likely be given a more clear picture of what is happening.

MENU 2 is also above MENU 1, and not the other way around, because you have the second menu after the first in the document (DOM) – and you have not set z-index.

---

From your CSS:

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

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

A more complete example with HTML markup would make it easier to help. (As would a lessened amount of comments in the CSS.)

For a quick fix this should make it work, though I would most likely have used a different approach:

#Menu {
   z-index  : 200;
}

#Menu2 {
   z-index  : 100;
}

---

You also have a lot of redundant styling. Instead of attaching everything to ID's you should make use of class names and only separate out what differs in the styling between the menus. Giving you something like this in your markup:

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

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

And in your CSS, for the common styles:

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

... and so on.

Then for each individual menu:

#menu_1 {
    left: 10px;
}

#menu_2 {
    left: 100px;
}

... etc.