HTML 5导航菜单显示悬停时子菜单中的重叠列表项

Question

问题在于面对具有类名称为.SubMenu的嵌套无序列表，以下是屏幕截图，“ 我们的活动”下面的子菜单未显示HTML makrup中存在的所有5个列表项

这是HTML 5代码

<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">
    <meta name = "description" content = "this is sample description!!">
    <link rel = "stylesheet" href = "style.css">
    <title>Official Website</title>
</head>
<body>
    <header>
        <h1 class = "logo">Sample</h1>
        <ul class = "SocialMediaLinks">
            <li><a href = "#">F</a></li>
            <li><a href = "#">T</a></li>
            <li><a href = "#">G+</a></li>
        </ul>
    </header>
    <nav class = "NavigationSection">
        <ul class = "MainMenu">
            <li><a href = "#">The Organization</a></li>
            <li><a href = "#">The Mission</a></li>
            <li><a href = "#">The Guru</a></li>
            <li><a href = "#">Our Activities</a>
                <ul class = "SubMenu">
                    <li>menu 1</li>
                    <li>menu 2</li>
                    <li>menu 3</li>
                    <li>menu 4</li>
                    <li>menu 5</li>
                </ul>
            </li>
            <li><a href = "#">Programmes By Guruji</a></li>
            <li><a href = "#">Team TadEkam</a></li>
            <li><a href = "#">Our Blogs</a></li>
            <li><a href = "#">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

这是CSS

/*
Name : style.css
Description : contains sitewide css rules for every element on all the pages
*/

/* --- HEADER SECTION ---*/
header{
background-color: #197419;
padding: 15px;
}
/* --- LOGO SECTION ---*/
.logo{
font-size: 40px;
color: white;
display: inline;
margin-left: 30px;
}
/* --- SOCIAL MEDIA SECTION ---*/
.SocialMediaLinks{
display: inline;
margin-left: 1100px;
}
.SocialMediaLinks li{
list-style-type: none;
display: inline-block;
font-size: 40px;
color: white;
}
.SocialMediaLinks li a{
padding: 7px;
}
.SocialMediaLinks a:link{
text-decoration: none;
color: white;
}
.SocialMediaLinks a:visited{
text-decoration: none;
color: white;
}
.SocialMediaLinks a:hover{
background-color: #28A428;
border-radius: 5px;
}

/* --- BODY SECTION --- */
body{
margin: 0px;
}

/* --- NAVIGATION SECTION --- */
.NavigationSection{
position: relative;
background-color: #197419;
padding: 5px;
}
/* --- MAIN MENU SECTION ---*/
.MainMenu li{
position: relative;
list-style-type: none;
font-size: 20px;
display: inline-block;
margin-right: 30px;
color: white;
}
.MainMenu li a{
padding: 5px;
}
.MainMenu a:link{
text-decoration: none;
color: white;
}
.MainMenu a:visited{
text-decoration: none;
color: white;
}
.MainMenu a:hover{
background-color: #28A428;
border-radius: 5px;
}
.MainMenu li .SubMenu li{
list-style-type: none;
display: none;
}
.MainMenu li:hover .SubMenu li{
display: block;
position: absolute;
}

Answer 1

进行更改

.MainMenu li:hover .SubMenu li{
display: block;
position: relative;
}

位置：相对；

小提琴

Answer 2

jsFiddle

您必须设置位置：绝对； 到下拉菜单：

.MainMenu li .SubMenu {
    position:absolute;
    top:25px;
    left:-20px;
    width: 200px;
    background:#197419;
    padding-top:10px;
}

Answer 3

您的<body>太短且隐藏了下落。 在主菜单上添加位置：相对和z索引，并在菜单后添加内容。 我使用以下代码：

margin-bottom:100px;
    position:relative;
    z-index:9999;

http://jsfiddle.net/YnWUR/1/