Question posted in 
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>NPC RESOURCES BERHAD</title>
<link href="style.css" rel="stylesheet" type="text/css" /><script>
(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');
</script>
</head>
<body><script type="text/javascript" src="js/lib/jquery.min.js"></script><script type="text/javascript" src="js/jquery.backstretch.min.js"></script><!--
<script>
$.backstretch("images/bgred2.jpg");
</script>
-->
<div align="center">
<table bgcolor="#FFFFFF" border="0" width="780">
<tbody>
<tr valign="bottom">
<th colspan="2" scope="col">
<div align="left"><img height="148" src="images/npcgif.gif" width="780" /> <img height="49" src="images/NPC.jpg" width="780" /> <img height="18" src="images/layout2_03.jpg" width="230" />
<table align="right" border="0" cellpadding="10" width="532">
<tbody>
<tr>
<th scope="col">
<div align="center" class="masterlink"><a href="index.htm">MAIN</a></div>
</th>
<th scope="col">
<div align="center" class="masterlink"><a href="companyprofile.htm">COMPANY PROFILE</a></div>
</th>
<th scope="col">
<div align="center" class="masterlink"><a href="ourbusiness.htm">OUR BUSINESS</a></div>
</th>
<th scope="col">
<div align="center" class="masterselectedlink"><a href="corporategovernance.htm">CORPORATE COVERNANCE</a></div>
</th>
<th scope="col">
<div align="center" class="masterlink"><a href="financialhl.htm">INVESTORS RELATIONS</a></div>
</th>
<th scope="col">
<div align="center" class="masterlink"><a href="career.htm">CAREER</a></div>
</th>
<th scope="col">
<div align="center" class="masterlink"><a href="contact.htm">CONTACT</a></div>
</th>
</tr>
</tbody>
</table>
</div>
</th>
</tr>
<tr>
<td height="300" valign="top">
<div align="center"></div>
<div align="left"></div>
<div align="justify">
<table align="center" background="images/bgsmall.jpg" border="0" cellpadding="3" cellspacing="3" width="90%">
<tbody>
<tr valign="top">
<td>
<p class="paragraphboldblack">The requested webpage was not found.</p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div align="center"><img height="69" src="images/layout2_14.jpg" width="780" /></div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>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.
Can anyone help??
Thanks so much.
2
Answers
The webpage was as such when I was instructed to edit the whole website. I have zero experience in all things tech so I basically Googled "how to's" on what I could do. Like you said, most advice online have not been keen on using tables as a navigation bar, but I dare not change that as I don't know how to adjust the styling.
What I've tried:
As you can see, the button is outside the table. I understand the colouring and format is different, but what am I supposed to do to get it to be in the same original position, just with dropdown items? I'd like to work with the current table, instead of redefining the whole format, since the whole website has the navigation menu as a table.
Thanks again
To update: I’ve managed to fit the “CORPORATE GOVERNANCE” in the place I want it to be. But how do I figure out what the old font, colour, size etc of the page so I can make it match?
Would really REALLY appreciate any advice on how to style this. Thanks very much in advance.
Joanne