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.