时间戳

首页 > 解决方案 > 使用 CSS 和 HTML 将导航表栏变成悬停下拉菜单

html - 使用 CSS 和 HTML 将导航表栏变成悬停下拉菜单

问题描述

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

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

我想将“公司治理”设置为悬停下拉项目，因此当您将鼠标悬停在它上面时，还有其他几个选项可用。我目前正在使用 cPanel。

有人可以帮忙吗？？

非常感谢。

标签： htmlcss

解决方案

更新：我已经成功地将“公司治理”置于我想要的位置。但是我如何弄清楚页面的旧字体、颜色、大小等，以便匹配？

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

真的很感激任何关于如何设计这个样式的建议。首先十分感谢。

乔安妮

推荐阅读