使用CSS和HTML将导航表栏设置为悬停下拉列表

时间：2018-06-01 03:12:14

标签： html css

目前我正在编辑一个在表格中有导航栏的网站页面。我想将其中一个项目扩展为悬停下拉项目。但我似乎无法对齐和设置它以匹配当前格式

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

我想做＆＃34;公司治理＆＃34;进入悬停下拉项目，因此当您将鼠标悬停在其上时，可以使用其他几个选项。我目前正在使用cPanel。

任何人都可以帮忙吗？

非常感谢。

2 个答案:

答案 0 :(得分：0)

当我被指示编辑整个网站时，网页就是这样。我对所有技术都没有经验，所以我基本上用Google搜索＆＃34;如何＆＃34;＆＃34;我能做什么就像你说的那样，大多数在线建议并不热衷于使用表格作为导航栏，但我不敢改变它，因为我不知道如何调整样式。

我尝试过的事情：

＆＃13;
＆＃13; 
<!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">
			    <style type="text/css">.dropbtn {
                                background-color: #4CAF50;
                                color: white;
                                padding: 16px;
                                font-size: 16px;
                                border: none;
                            }
                            
                            .dropdown {
                                position: relative;
                                display: inline-block;
                            }
                            
                            .dropdown-content {
                                display: none;
                                position: absolute;
                                background-color: #f1f1f1;
                                min-width: 160px;
                                box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                                z-index: 1;
                            }
                            
                            .dropdown-content a {
                                color: black;
                                padding: 12px 16px;
                                text-decoration: none;
                                display: block;
                            }
                            
                            .dropdown-content a:hover {background-color: #ddd}
                            
                            .dropdown:hover .dropdown-content {
                                display: block;
                            }
                            
                            .dropdown:hover .dropbtn {
                                background-color: #3e8e41;
                            }
                </style>
				<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>
						<div align="center" class="masterselectedlink">
                        <div class="dropdown"><button class="dropbtn"><div position="col"></div>CORPORATE GOVERNANCE</button>
                        <div class="dropdown-content"><a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a></div>
                        </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>

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

<div align="center"><img height="69" src="images/layout2_14.jpg" width="780" /></div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

如您所见，按钮位于表格之外。我知道着色和格式是不同的，但是我应该做些什么才能让它处于同一个原始位置，只需要下拉项目？我想使用当前的表格，而不是重新定义整个格式，因为整个网站都有导航菜单作为表格。

再次感谢

答案 1 :(得分：0)

更新：我已经设法在我想要的地方适应“公司治理”。但是，我如何弄清楚页面的旧字体，颜色，大小等，以便我可以匹配？

<!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">
			    <style type="text/css">.dropbtn {
                                background-color: #ffffff;
                                color: black;
                                padding: 16px;
                                font-size: 16px;
                                border: none;
                            }
                            
                            .dropdown {
                                position: relative;
                                display: inline-block;
                            }
                            
                            .dropdown-content {
                                display: none;
                                position: absolute;
                                background-color: #f1f1f1;
                                min-width: 160px;
                                box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                                z-index: 1;
                            }
                            
                            .dropdown-content a {
                                color: black;
                                padding: 12px 16px;
                                text-decoration: none;
                                display: block;
                            }
                            
                            .dropdown-content a:hover {background-color: #ccd4cc}
                            
                            .dropdown:hover .dropdown-content {
                                display: block;
                            }
                            
                            .dropdown:hover .dropbtn {
                                background-color: #ccd4cc;
                            }
                </style>
				<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>
						<td class="dropdown">
						<div align="center" class="masterselectedlink">
                        <div class="dropdown"><button class="dropbtn">CORPORATE GOVERNANCE</button>
                        <div class="dropdown-content"><a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a></div>
                        </div>
            			<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>

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

<div align="center"><img height="69" src="images/layout2_14.jpg" width="780" /></div>
</body>
</html>

真的非常感谢任何关于如何设计这种风格的建议。非常感谢提前。

乔安妮

相关问题
最新问题