title: Make navigation table bar into hover dropdown using CSS and HTML
body: <p>currently I am editing a website page that has a navigation bar in a table. I want to expand one of the items into a hover drop down item. But I cannot seem to align and style it to match the current format</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=windows-1252"&gt;
   &lt;title&gt;NPC RESOURCES BERHAD&lt;/title&gt;
   &lt;link href="style.css" rel="stylesheet" type="text/css" /&gt;&lt;script&gt;
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  
    ga('create', 'UA-43048026-3', 'npc.com.my');
    ga('send', 'pageview');
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;&lt;script type="text/javascript" src="js/lib/jquery.min.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="js/jquery.backstretch.min.js"&gt;&lt;/script&gt;&lt;!--
  &lt;script&gt;
      $.backstretch("images/bgred2.jpg");
  &lt;/script&gt;
  --&gt;
  &lt;div align="center"&gt;
  &lt;table bgcolor="#FFFFFF" border="0" width="780"&gt;
   &lt;tbody&gt;
    &lt;tr valign="bottom"&gt;
     &lt;th colspan="2" scope="col"&gt;
     &lt;div align="left"&gt;&lt;img height="148" src="images/npcgif.gif" width="780" /&gt; &lt;img height="49" src="images/NPC.jpg" width="780" /&gt; &lt;img height="18" src="images/layout2_03.jpg" width="230" /&gt;
     &lt;table align="right" border="0" cellpadding="10" width="532"&gt;
      &lt;tbody&gt;
       &lt;tr&gt;
        &lt;th scope="col"&gt;
        &lt;div align="center" class="masterlink"&gt;&lt;a href="index.htm"&gt;MAIN&lt;/a&gt;&lt;/div&gt;
        &lt;/th&gt;
        &lt;th scope="col"&gt;
        &lt;div align="center" class="masterlink"&gt;&lt;a href="companyprofile.htm"&gt;COMPANY PROFILE&lt;/a&gt;&lt;/div&gt;
        &lt;/th&gt;
        &lt;th scope="col"&gt;
        &lt;div align="center" class="masterlink"&gt;&lt;a href="ourbusiness.htm"&gt;OUR BUSINESS&lt;/a&gt;&lt;/div&gt;
        &lt;/th&gt;
        &lt;th scope="col"&gt;
        &lt;div align="center" class="masterselectedlink"&gt;&lt;a href="corporategovernance.htm"&gt;CORPORATE COVERNANCE&lt;/a&gt;&lt;/div&gt;
        &lt;/th&gt;
        &lt;th scope="col"&gt;
        &lt;div align="center" class="masterlink"&gt;&lt;a href="financialhl.htm"&gt;INVESTORS RELATIONS&lt;/a&gt;&lt;/div&gt;
        &lt;/th&gt;
        &lt;th scope="col"&gt;
        &lt;div align="center" class="masterlink"&gt;&lt;a href="career.htm"&gt;CAREER&lt;/a&gt;&lt;/div&gt;
        &lt;/th&gt;
        &lt;th scope="col"&gt;
        &lt;div align="center" class="masterlink"&gt;&lt;a href="contact.htm"&gt;CONTACT&lt;/a&gt;&lt;/div&gt;
        &lt;/th&gt;
       &lt;/tr&gt;
      &lt;/tbody&gt;
     &lt;/table&gt;
     &lt;/div&gt;
     &lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
     &lt;td height="300" valign="top"&gt;
     &lt;div align="center"&gt;&lt;/div&gt;
  
     &lt;div align="left"&gt;&lt;/div&gt;
  
     &lt;div align="justify"&gt;
     &lt;table align="center" background="images/bgsmall.jpg" border="0" cellpadding="3" cellspacing="3" width="90%"&gt;
      &lt;tbody&gt;
       &lt;tr valign="top"&gt;
        &lt;td&gt;
        &lt;p class="paragraphboldblack"&gt;The requested webpage was not found.&lt;/p&gt;
        &lt;/td&gt;
       &lt;/tr&gt;
      &lt;/tbody&gt;
     &lt;/table&gt;
     &lt;/div&gt;
     &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
     &lt;td&gt;
     &lt;div align="center"&gt;&lt;img height="69" src="images/layout2_14.jpg" width="780" /&gt;&lt;/div&gt;
     &lt;/td&gt;
    &lt;/tr&gt;
   &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to make "CORPORATE GOVERNANCE" into a hover drop down item, so when you hover over it, several other options are available. I am currently using cPanel.</p>
  
  <p>Can anyone help??</p>
  
  <p>Thanks so much.</p>