HTML 5 navigation menu showing overlapping list items in sub menu on hover

The problem is with faced with the nested unordered list having a class name of .SubMenu, below is the screenshot, the sub menu below Our Activities does not show all the 5 list items as present in the HTML makrup

Here is the HTML 5 code

<!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>

and here is the 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;
}

Answers


Make this change

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

position:relative;

FIDDLE


jsFiddle

You must set position:absolute; to the drop down menu:

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

Your <body> is too short and hidden drop. Add position:relative and z-index on main menu and add content after menu. I used this code:

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

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


Need Your Help


About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.