title: Making interactive menu with table method
body: <p>I have written some codes of html &amp; have given style to it. it's same page of bootstrap home page. But just for my practice. Everything is fine but I cannot make top menu navigation same as bootstrap. I mean when I hover over the menu a background should appear behind that menu. it should be of different size for each menu. So, I think I have to define blocks for each li, so how can I do that. Please refer to bootrap home page to know about top menu. Thank you.</p>
  
  <p></p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
      &lt;style type="text/css"&gt;
  
      body{
          background-color: #5C4283;
          margin: 0;
      }
  
      #topBar{
          background-color: white;
          width: 100%;
          height: 50px;
      }
  
      #bootstrap{
          font-size: 19px;
          font-family: Arial;
          color: #5C4283;
          float:left;
          margin-top: 12px;
          margin-left: 100px;     
      }
  
      #topMenu{
          margin-top: 0;
          float: left;
          font-size: 15px;
          font-family: Arial;
          color: #5C4283;         
          height: 35px;   
          padding-top: 15px;          
      }
  
      #topMenu li{
          list-style-type: none;
          float: left;
          margin-right: 20px;                             
      }   
  
      #topMenu ul{
          margin: 0;      
      }
  
      #topMenu a{
          text-decoration: none;
      }
  
      #topSideMenu{
          margin-top: 15px;
          margin-left: 430px;
          float: left;
          font-size: 15px;
          font-family: Arial;
          color: #5C4283;
      }
      #topSideMenu li{        
          list-style-type: none;
          display: inline;
          margin-right: 20px;
      }
  
      #topSideMenu ul{
          margin: 0;
      }
  
      #logoLink{
          color: white;
          text-decoration: none;
          display: block;
          border: 1px solid rgba(255,255,255, 0.7);
          width : 150px;
          height: 150px;
          border-radius: 20px;
      }
  
      #wrapper{
          margin-top: 100px;
          width: 100%;    
      }
  
      #container {
          margin: 0 auto;
          width:150px;
      }
      #bootText{
          font-size: 110px;
          margin: 0;
          padding: 0;
          font-family: Arial;
          padding-left: 40px;
          padding-top: 15px;
      }
      #logoText{
          color: white;
          font-size: 30px;
          font-family: Arial;
          text-align: center;
          word-spacing: 5px;
          line-height: 130%;
          margin-top: 30px;
          margin-bottom: 30px;
      }
  
      #downloadBoot{
          margin: 0 auto;
          width: 250px;
          margin-bottom: 60px;
      }
  
      #dwnBootstrap{
          display: block;
          width: 250px;
          height: 60px;
          border: 1px solid rgba(255,255,255, 0.7);
          border-radius: 10px;
          color: white;
          text-decoration: none;
          font-family: Arial;
          font-size: 20px;
          text-align: center;
      }
  
      #dwnBootstrap:hover{
          background-color: white;
          color: #5C4283;
      }
  
      #dwnText{
          margin: 0;
          padding-top: 17px;
      }
  
      #versionTxt{
          color: white;
          font-family: Arial;
          font-size: 14px;
          text-align: center;
          opacity: 0.3;
      }
  
      #adBlock{
          margin: 0 auto;
          width: 330px;
          height: 130px;
          border: 1px solid rgba(255,255,255, 0.3);
          border-radius: 5px;
      }
  
      #adpic{
          margin-top: 16px;
          margin-left: 15px;
          width: 130px;
          height: 100px;  
          position: absolute;     
      }
  
      #adtext{
          width: 150px;
          height: 100px;
          margin-top: 16px; 
          margin-left: 160px;
          color: white;
          font-family: Arial;
          font-size: 13px;
          word-spacing: 1px;
      }
  
      #adlink{
          text-decoration: none;
          color: white;
      }
  
      #adsvia{
          opacity: 0.4;
      }
  
      #restbody{
          background-color: white;
          width: 100%;
          height: 1900px;
          margin-top: 80px;
      }
  
      #upperPart{
          margin-top: 100px;
          position: absolute;
          width: 100%;
      }
  
      #uppertext{
          margin: 0 auto;
          width: 665px;
      }
  
      #everyone{
          font-family: Calibri;
          font-weight: lighter;
          font-size: 45px;
          color: #3F3333;
          margin: 0;
      }
  
      #bottomtext{
          width: 920px;
          margin: 0 auto;     
      }
  
      #front-end{
          font-family: Calibri;
          font-weight: normal;
          font-size: 23px;
          text-align: center;
          color: #555555;
          margin: 0;
      }
  
      #firstimage{
          margin-top: 40px;
          margin-left: 80px;
          width: 380px;
          height: 300px;      
          text-align: center; 
          float: left;    
      }
  
      #img01headingtxt{
          margin-top: 15px;
          color: #3E3733;
          font-family: Calibri;
          font-size: 28px;
          margin-bottom: 0;
      }
  
      #img01text{
          margin-top: 5px;
          color: #3E3733;
          font-family: Calibri;
          font-size: 19px;
      }
  
      #secondimage{
          margin-top: 40px;
          margin-left: 30px;
          width: 400px;
          height: 300px;      
          text-align: center; 
          float: left;    
      }
  
      #img02headingtxt{
          margin-top: 15px;
          color: #3E3733;
          font-family: Calibri;
          font-size: 28px;
          margin-bottom: 0;
      }
  
      #img02text{
          margin-top: 5px;
          color: #3E3733;
          font-family: Calibri;
          font-size: 19px;
      }
  
      #thirdimage{
          margin-top: 40px;
          margin-right: 40px;     
          width: 400px;
          height: 300px;      
          text-align: center; 
          float: right;   
      }
  
      #img03headingtxt{
          margin-top: 15px;
          color: #3E3733;
          font-family: Calibri;
          font-size: 28px;
          margin-bottom: 0;
      }
  
      #img03text{
          margin-top: 5px;
          color: #3E3733;
          font-family: Calibri;
          font-size: 19px;
      }
  
      #images{
          width: 100%;
          height: 330px;      
      }
  
      #firstline{
          margin-top: 40px;
          color: #EEEEEE;
          opacity: 0.2;
          width: 120px;
      }
  
      #singleline{
          font-family: Calibri;
          font-size: 24px;
          color: #55555B;
          text-align: center;
          margin-top: 40px;
      }
  
      #gifthubbtn{
          margin: 0 auto;
          width: 250px;       
      }
  
      #gifthub{
          display: block;
          border: 1px solid #563D7C;
          border-radius: 7px;
          width: 250px;
          height: 45px;
          text-decoration: none;      
          text-align: center;
          color: #551A8B;
      }
  
      #gifthub:hover{
          color: white;
          background-color: #563D7C;
      }
  
      #gifthubtxt{
          font-size: 22px;
          margin-top: 8px;
          font-family: Calibri;
      }
  
      #secondline{
          margin-top: 100px;
          color: #EEEEEE;
          opacity: 0.3;       
      }
  
      #builtWith{
          margin-top: 110px;
      }
  
      #builtwithtxt{
          font-size: 45px;
          font-family: Calibri;
          text-align: center;
          color: #333333;
          margin: 0;
      }
  
      #builtwithbtm{
          width: 900px;
          margin: 0 auto;
      }
  
      #builtwithbtmtxt{
          font-family: Calibri;
          font-size: 24px;        
          color: #555555;
          text-align: center; 
          margin-top: 5px;    
      }
  
      #collection{
          text-decoration: none;
          color: #428BCA;
      }
  
      #collection:hover{
          text-decoration: underline;
          color: #2a6496;
      }
  
      #btmimagecontainer{
          margin-top: 40px;
      }
  
      #btmimages{
          width: 1141px;
          height: 229px;
          margin: 0 auto;
      }
  
      #btmimagetxt{
          margin-top: 70px;
      }
  
      #explorebtn{
          margin: 0 auto;
          width: 250px;
      }
  
      #explore{
          display: block;
          border: 1px solid #563D7C;
          border-radius: 7px;
          width: 200px;
          height: 45px;
          text-decoration: none;      
          text-align: center;
          color: #551A8B;
      }
  
      #exploretxt{
          font-size: 22px;
          margin-top: 8px;
          font-family: Calibri;
      }
  
      #explore:hover{
          color: white;
          background-color: #563D7C;
      }
  
      #links{
          margin-top: 50px;
      }
  
      #sociallinks{
          width: 614px;
          margin: 0 auto;     
      }
  
      #firstlink{
          float: left;
          width: 105px;
          height: 27px;
      }
  
      #secondlink{
          float: left;
          margin-left: 20px;
          width: 110px;
          height: 27px;
      }
  
      #thirdlink{
          float: left;
          margin-left: 20px;
          width: 235px;
          height: 27px;
      }
  
      #fourthlink{
          float: left;
          margin-left: 20px;
          width: 104px;
          height: 27px;
      }
  
      #footer{
          margin-top: 100px;
      }
  
      #footertxtarea{
          margin: 0 auto;
          width: 510px;           
      }
  
      #footertxt{     
          color: #7777A4;
          font-family: Calibri;
          font-size: 18px;
          text-align: center;                 
      }
  
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div id="topBar"&gt;
          &lt;div id="bootstrap"&gt;Bootstrap&lt;/div&gt;     
          &lt;div id="topMenu"&gt;
              &lt;ul&gt;
                  &lt;li id="firstli"&gt;&lt;a href=""&gt;Getting Started&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="" id="secondli"&gt;CSS&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Components&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Javascript&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Customize&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;      
          &lt;div id="topSideMenu"&gt;
              &lt;ul&gt;
                  &lt;li&gt;Expo&lt;/li&gt;
                  &lt;li&gt;Blog&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;      
      &lt;/div&gt;  
      &lt;div id="wrapper"&gt;
          &lt;div id="container"&gt;            
              &lt;a id="logoLink"&gt;&lt;p id="bootText"&gt;B&lt;/p&gt;&lt;/a&gt;     
          &lt;/div&gt;
          &lt;div  id="logoText"&gt;
              Bootstrap is the most popular HTML, CSS, and JS framework for &lt;br&gt;developing responsive, mobile first projects on the web.
          &lt;/div&gt;
          &lt;div id="downloadBoot"&gt;
              &lt;a href="" id="dwnBootstrap"&gt;&lt;p id="dwnText"&gt;Download Bootstrap&lt;/p&gt;&lt;/a&gt;&lt;p id="versionTxt"&gt;Currently v3.3.0&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="adBlock"&gt;
              &lt;div id="adpic"&gt;
                  &lt;a href=""&gt;&lt;img src="ad pic.jpg" /&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div id="adtext"&gt;
                  &lt;p&gt;We connect highly qualified audiences with highly relevant services, products, and brands.&lt;/p&gt;
                  &lt;p&gt;&lt;a href="" id="adlink"&gt;&lt;span id="adsvia"&gt;ads via &lt;/span&gt;Carbon&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="restbody"&gt;
              &lt;div id="upperPart"&gt;
                  &lt;div id="uppertext"&gt;
                      &lt;p id="everyone"&gt;Designed for everyone, everywhere.&lt;/p&gt;
                  &lt;/div&gt;
  
                  &lt;div id="bottomtext"&gt;
                      &lt;p id="front-end"&gt;Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.&lt;/p&gt;
                  &lt;/div&gt;&lt;hr id="firstline"&gt;
                  &lt;div id="images"&gt;
                  &lt;div id="firstimage"&gt;               
                      &lt;img src="img01.jpg" /&gt;
                      &lt;p id="img01headingtxt"&gt;Preprocessors&lt;/p&gt;
                      &lt;p id="img01text"&gt;Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, Less and Sass. Quickly get started with precompiled CSS or build on the source.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div id="secondimage"&gt;              
                      &lt;img src="img02.jpg" /&gt;
                      &lt;p id="img02headingtxt"&gt;One framework, every device.&lt;/p&gt;
                      &lt;p id="img02text"&gt;Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.&lt;/p&gt;
                  &lt;/div&gt;      
                  &lt;div id="thirdimage"&gt;               
                      &lt;img src="img03.jpg" /&gt;
                      &lt;p id="img03headingtxt"&gt;Full of features&lt;/p&gt;
                      &lt;p id="img03text"&gt;With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;      
                  &lt;hr id="firstline"&gt;
                  &lt;div&gt;
                      &lt;p id="singleline"&gt;Bootstrap is open source. It's hosted, developed, and maintained on GitHub.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div id="gifthubbtn"&gt;
                      &lt;a href="" id="gifthub"&gt;&lt;p id="gifthubtxt"&gt;View the GiftHub Project&lt;/p&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;hr id="secondline"&gt;
                  &lt;div id="builtWith"&gt;
                      &lt;p id="builtwithtxt"&gt;Built with Bootstrap.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div id="builtwithbtm"&gt;
                      &lt;p id="builtwithbtmtxt"&gt;Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing &lt;a href="" id="collection"&gt;collection of examples&lt;/a&gt; or by exploring some of our favorites.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;hr id="firstline"&gt;
                  &lt;div id="btmimagecontainer"&gt;
                      &lt;div id="btmimages"&gt;
                          &lt;a href=""&gt;&lt;img src="btmimage.jpg"&gt;&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div id="btmimagetxt"&gt;
                      &lt;p id="builtwithbtmtxt"&gt;We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div id="explorebtn"&gt;
                      &lt;a href="" id="explore"&gt;&lt;p id="exploretxt"&gt;Explore the Expo&lt;/p&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;hr id="secondline" /&gt;
                  &lt;div id="links"&gt;
                      &lt;div id="sociallinks"&gt;
                          &lt;div id="firstlink"&gt;
                              &lt;a href=""&gt;&lt;img src="link01.jpg" /&gt;&lt;/a&gt;
                          &lt;/div&gt;
                          &lt;div id="secondlink"&gt;
                              &lt;a href=""&gt;&lt;img src="link02.jpg" /&gt;&lt;/a&gt;
                          &lt;/div&gt;
                          &lt;div id="thirdlink"&gt;
                              &lt;a href=""&gt;&lt;img src="link03.jpg" /&gt;&lt;/a&gt;
                          &lt;/div&gt;
                          &lt;div id="fourthlink"&gt;
                              &lt;a href=""&gt;&lt;img src="link04.jpg" /&gt;&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div id="footer"&gt;
                      &lt;div id="footertxtarea"&gt;
                          &lt;p id="footertxt"&gt;Designed and built with all the love in the world by @mdo and @fat. &lt;br&gt; Maintained by the core team with the help of our contributors. &lt;br&gt; Code licensed under MIT, documentation under CC BY 3.0.&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>