title: HTML 5 navigation menu showing overlapping list items in sub menu on hover
body: <p>The problem is with faced with the nested unordered list having a class name of .SubMenu, below is the screenshot, the sub menu below <strong>Our Activities</strong> does not show all the 5 list items as present in the HTML makrup</p>
  
  <p><img src="https://i.stack.imgur.com/nbEk1.png" alt="enter image description here"></p>
  
  <p>Here is the HTML 5 code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset = "UTF-8"&gt;
      &lt;meta name = "description" content = "this is sample description!!"&gt;
      &lt;link rel = "stylesheet" href = "style.css"&gt;
      &lt;title&gt;Official Website&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
          &lt;h1 class = "logo"&gt;Sample&lt;/h1&gt;
          &lt;ul class = "SocialMediaLinks"&gt;
              &lt;li&gt;&lt;a href = "#"&gt;F&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href = "#"&gt;T&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href = "#"&gt;G+&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/header&gt;
      &lt;nav class = "NavigationSection"&gt;
          &lt;ul class = "MainMenu"&gt;
              &lt;li&gt;&lt;a href = "#"&gt;The Organization&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href = "#"&gt;The Mission&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href = "#"&gt;The Guru&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href = "#"&gt;Our Activities&lt;/a&gt;
                  &lt;ul class = "SubMenu"&gt;
                      &lt;li&gt;menu 1&lt;/li&gt;
                      &lt;li&gt;menu 2&lt;/li&gt;
                      &lt;li&gt;menu 3&lt;/li&gt;
                      &lt;li&gt;menu 4&lt;/li&gt;
                      &lt;li&gt;menu 5&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href = "#"&gt;Programmes By Guruji&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href = "#"&gt;Team TadEkam&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href = "#"&gt;Our Blogs&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href = "#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and here is the CSS</p>
  
  <pre><code>/*
  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;
  }
  </code></pre>