0
* {
\t margin: 0;
\t padding: 0;
}
a {
\t text-decoration: underline;
\t color: #0F8C8C;
}
a:hover {
\t text-decoration: none;
}
body {
\t line-height: 1.75em;
\t background: url("../images/obg.png");
\t background-repeat:no-repeat;
\t background-size:cover;
\t background-attachment: fixed;
}
body,input {
\t font-family: "Times New Roman", Times, serif;
}
strong {
\t color: #000000;
}
br.clearfix {
\t clear: both;
}
h1,h2,h3,h4 {
\t font-weight: normal;
}
h2 {
\t font-size: 2.25em;
}
h2,h3,h4 {
\t color: #2C2B2B;
\t margin-bottom: 1em;
}
h3 {
\t font-size: 1.75em;
}
h4 {
\t font-size: 1.5em;
}
img.alignleft {
\t margin: 5px 20px 20px 0;
\t float: left;
}
img.aligntop {
\t margin: 5px 0 20px 0;
}
img.pic {
\t padding: 5px;
\t border: solid 1px #D4D4D4;
}
p {
\t margin-bottom: 1.5em;
}
ul {
\t margin-bottom: 1.5em;
}
ul h4 {
\t margin-bottom: 0.35em;
}
.box {
\t overflow: hidden;
\t margin-bottom: 1em;
}
.date {
\t background: #6E6E6E;
\t padding: 5px 6px 5px 6px;
\t margin: 0 6px 0 0;
\t color: #FFFFFF;
\t font-size: 0.8em;
\t border-radius: 2px;
}
#content {
\t width: 665px;
\t float: left;
\t padding: 0;
\t position: relative;
}
#content-box1 {
\t width: 320px;
\t float: left;
}
#content-box2 {
\t margin: 0 0 0 345px;
\t width: 320px;
}
#footer {
\t margin: 40px 0 120px 0;
\t text-align: center;
\t color: #000000;
}
#footer a {
\t color: #000000;
}
#header {
\t height: 75px;
\t position: relative;
\t padding: 45px;
\t color: #FFFFFF;
\t width: 888px;
\t overflow: hidden;
}
li.dropdown {
display: inline-block;
}
li a:hover, .dropdown:hover .dropbtn {
}
.dropdown-content {
\t background: url('../images/nav.png');
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
z-index: 1;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
text-align: center;
border: thin solid #000000;
}
.dropdown:hover .dropdown-content {
}
.show {display:block;}
#menu {
\t padding: 0 45px 0 45px;
\t position: relative;
background: url('../images/nav.png');
\t margin: 0 0 0 0;
\t height: 60px;
\t line-height: 60px;
\t width: 890px;
\t border-top: 1px solid #000000;
\t }
#menu a {
\t text-decoration: none;
\t color: #000000;
\t font-weight: bold;
\t font-size: large;
\t font-family: "Times New Roman", Times, serif;
}
#menu ul {
\t display: table;
\t width: 100%;
\t list-style: none;
\t margin: 0;
\t padding: 0;
}
#menu ul li {
\t display: table-cell;
\t background-position: 0 -118px;
\t background-repeat: no-repeat;
\t height: 49px;
\t width: 122px;
\t margin: 0;
\t padding-left: 1px;
\t text-align: center;
}
#menu ul li.first {
\t padding-left: 0;
}
#page {
\t background: url('../images/lgcont.jpg');
\t padding: 45px 45px 15px 45px;
\t position: relative;
\t width: 890px;
\t margin: 0;
}
#page .section-list {
\t list-style: none;
\t padding-left: 0;
}
#page .section-list li {
\t clear: both;
\t padding: 30px 0 30px 0;
}
#page ul {
\t list-style: none;
}
#page ul li {
\t border-top: solid 1px #D4D4D4;
\t padding: 15px 0 15px 0;
}
#page ul li.first {
\t padding-top: 0;
\t border-top: 0;
}
#page-bottom {
\t position: relative;
\t margin: 0;
\t background: #000000 url('../images/banner2.jpg') no-repeat left top;
\t width: 890px;
\t height: 200px;
\t padding: 45px 45px 0 45px;
\t color: #000000;
}
#page-bottom a {
\t color: #F5F5F5;
}
#page-bottom h2, #page-bottom h3, #page-bottom h4 {
\t color: #FFFFFF;
}
#page-bottom ul {
\t list-style: none;
}
#page-bottom ul li {
\t border-top: solid 1px #8F8F8F;
\t padding: 15px 0 15px 0;
}
#page-bottom ul li.first {
\t padding-top: 0;
\t border-top: 0;
}
#page-bottom-content {
\t width: 665px;
\t float: left;
\t clear: right;
}
#page-bottom-sidebar {
\t width: 200px;
\t margin: 0 0 0 0;
\t float: right;
}
#search input.form-submit {
\t margin-left: 1em;
\t color: #FFFFFF;
\t padding: 10px;
\t background: #2FACAC;
\t border: 0;
}
#search input.form-text {
\t border: solid 1px #8F8F8F;
\t padding: 10px;
}
#sidebar {
\t position: relative;
\t width: 200px;
\t padding: 0;
\t margin: 0 0 0 690px;
}
#splash {
\t background: url('../images/lgcont.jpg');
\t margin: 0 0 0 0;
\t height: 374px;
\t position: relative;
\t padding: 45px 45px 10px 45px;
\t width: 890px;
}
#splash .pic {
\t padding: 9px;
}
#wrapper {
\t background: url('../images/lgcont.jpg');
border: solid 1px #000000;
\t background-size:cover;
\t position: relative;
\t width: 980px;
\t margin: 75px auto 0 auto;
\t background: #FFFFFF;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mimars Energy Sdn Berhad - Your Best Partner in Business</title>
<link rel="icon" href="images/favImage.png" type="image/png"/>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
.style6 {
\t font-family: "Times New Roman", Times, serif;
}
.style7 {
\t text-align: center;
}
.style8 {
\t text-align: center;
\t font-size: xx-large;
}
.style9 {
\t text-align: left;
\t font-family: "Times New Roman", Times, serif;
}
.style10 {
\t text-align: left;
}
.style13 {
\t text-align: center;
\t font-family: "Times New Roman", Times, serif;
\t font-size: xx-large;
}
.style15 {
\t text-align: center;
\t font-family: "Times New Roman", Times, serif;
\t font-size: x-large;
}
.style17 {
\t font-size: large;
}
.style18 {
\t text-align: left;
\t font-size: large;
}
.style19 {
\t font-family: "Times New Roman", Times, serif;
\t font-size: large;
}
.style20 {
\t text-align: center;
\t font-size: large;
}
.style21 {
\t text-align: center;
\t font-family: "Times New Roman", Times, serif;
\t font-size: large;
}
.style22 {
\t text-align: center;
\t font-size: small;
}
.style23 {
\t font-size: x-large;
}
</style>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction1() {
document.getElementById("myDropdown1").classList.toggle("show");
}
function myFunction2() {
document.getElementById("myDropdown2").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</head>
<body>
<div id="wrapper">
\t <div id="header" style="background-image: url('images/logo.jpg'); width: 890px">
\t \t <img height="128" src="images/logo%20spin.gif" style="position: relative; left: 12px; top: -37px;" width="128" /></div>
\t <div id="menu">
\t \t <ul>
\t \t \t <li class="first current_page_item"><span class="style6"><a href="index.html">
\t \t \t Home</a></li>
\t \t \t
\t \t \t <li class="dropdown"><a href="javascript:void(0)" class="dropbtn" onclick="myFunction1()">Profile</a>
\t \t \t <div class="dropdown-content" id="myDropdown1">
\t \t \t <a href="profile.html">Mission & Vision</a>
\t \t \t <a href="license.html">License</a>
\t \t \t </div>
\t \t \t </li> \t
\t \t \t \t \t \t \t
\t \t \t <li><a href="project.html">Project</a></li>
\t \t \t <li><a href="suppliers.html">Suppliers</a></li>
\t \t \t
\t \t \t <li class="dropdown"><a href="javascript:void(0)" class="dropbtn" onclick="myFunction2()">Partners</a>
\t \t \t <div class="dropdown-content" id="myDropdown2">
\t \t \t <a href="internationalpartners.html">International</a>
\t \t \t <a href="localpartners.html">Local</a>
\t \t \t </div>
\t \t \t </li> \t
\t \t \t \t \t
\t \t \t <li class="last"><a href="contact.html">Contact Us</a></li>
\t \t </ul>
\t \t <br class="clearfix" />
\t </div>
\t <div id="page" style="left: 0px; top: 0px; height: 1549px;">
\t \t <table style="width: 100%">
\t \t \t <tr>
\t \t \t \t <td class="style13">
\t \t \t \t <strong>WELCOME TO MIMARS ENERGY</strong></td>
\t \t \t </tr>
\t \t \t </table>
\t \t <span class="style6"><br />
\t \t <table style="width: 100%">
\t \t \t <tr>
\t \t \t \t <td colspan="4" class="style7" style="height: 269px"><span class="style6">
\t \t
\t \t <iframe src="slideshow.html" frameborder="0" style="border: thin solid #000000; width: 80%; height: 354px; left: 2px; top: -2px; overflow: hidden;" allowfullscreen id="I1" class="style8" name="I1"></iframe>
\t \t \t \t </span></td>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t \t <td class="style13" colspan="4"> </td>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t \t <td class="style21" colspan="4">We envision ourselves to become
\t \t \t \t the key provider of ICT solutions, manpower supply & other
\t \t \t \t supplies and services to organizations locally and beyond.</td>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t \t <td class="style15" colspan="4"> </td>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t \t <td class="style15" colspan="4"> </td>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t \t <td colspan="4"><span class="style13"><strong><br />
\t \t \t \t <span class="style23">Services</span><br />
\t \t \t \t </strong></span>
\t \t \t \t <br class="style7" />
\t \t \t \t </td>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t \t <td style="width: 3889px" class="style7"><span class="style6"></span>
\t \t \t \t <img alt="network" height="103" src="images/network.png" style="position: relative; left: 12px; top: -3px;" width="102" /></td>
\t \t \t \t <td style="width: 4584px" class="style10"><span class="style17">Network</span><strong>
\t \t \t \t </strong></td>
\t \t \t \t <td style="width: 4035px" class="style7"><span class="style6"></span>
\t \t \t \t <img alt="manpower" height="107" src="images/manpower.png" style="position: relative; left: 22px; top: 1px;" width="105" /></td>
\t \t \t \t <td style="width: 4634px" class="style17">Manpower</td>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t \t <td style="width: 3889px">
\t \t \t \t <img alt="software" height="105" src="images/software.png" style="position: relative; left: 66px; top: 2px;" width="103" /><br class="style7" />
\t \t \t \t </td>
\t \t \t \t <td style="width: 4584px" class="style18">Software</td>
\t \t \t \t <td style="width: 4035px" class="style7"><span class="style6"></span>
\t \t \t \t <img alt="safety" height="107" src="images/safety.png" style="position: relative; left: 24px; top: -2px;" width="104" /></td>
\t \t \t \t <td style="width: 4634px" class="style17">Safety</td>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t \t <td style="width: 3889px">
\t \t \t \t <img alt="videoconference" height="101" src="images/video.png" style="position: relative; left: 67px; top: 3px;" width="102" /></td>
\t \t \t \t <td style="width: 4584px" class="style10"><span class="style17">Video Conferencing &
\t \t \t \t AV/</span><span class="style19">Solutions</span></td>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t \t <td colspan="4"> </td>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t \t <td colspan="4"><span class="style6"><strong>
\t \t \t \t <span class="style13"><br />
\t \t \t \t \t \t \t \t <span class="style23">News & Events</span><br />
\t \t \t \t </span>
\t \t \t \t </strong></span>
\t \t \t \t </td>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t \t <td colspan="4"> </td>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t \t <td style="width: 3889px">
\t \t \t \t <img alt="computer" height="83" src="images/Computer.png" style="position: relative; left: 79px; top: 3px;" width="83" /></td>
\t \t \t \t <td class="style9" colspan="3"><span class="style20">Supply &
\t \t \t \t Maintenance Computers for </span><strong><span class="style20">JX
\t \t \t \t Nippon Oil & Energy Corporation (Miri Branch)</span></strong></td>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t \t <td colspan="4"> </td>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t \t <td style="width: 3889px">
\t \t \t \t <img height="56" src="images/flircam.jpg" style="position: relative; left: 83px; top: 1px;" width="83" /></td>
\t \t \t \t <td colspan="3"><span class="style7"><span class="style17">Installing
\t \t \t \t FLIR camera at </span>
\t \t \t \t </span> <span class="style20"> <strong>PETRONAS Miri Crude Oil Terminal </strong></span>
\t \t \t \t <span class="style22">(Click <a href="project3page.html">here</a> to view)</span></td>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t \t <td colspan="4"> </td>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t \t <td style="width: 3889px">
\t \t \t \t <img height="83" src="images/cardaccess.png" style="position: relative; left: 82px; top: 0px;" width="83" /></td>
\t \t \t \t <td colspan="3"><span class="style20">Security Access Management System at </span>
\t \t \t \t <span class="style20"> <strong>
\t \t \t \t PETRONAS
\t \t \t \t FLNG Building </strong></span>
\t \t \t \t <span class="style22">(Click <a href="project2page.html">here</a> to view)</span></td>
\t \t \t </tr>
\t \t </table>
\t \t </span>
\t \t <br />
\t \t <br />
\t \t <span class="style6"></span>
\t </div>
\t <div id="page-bottom" style="left: 0px; top: 0px">
\t </div>
</div>
<div id="footer">
\t Copyright © 2016 <a href="index.html">www.mimars.com.my</a> All rights reserved.</div>
</body>
</html>我有2個下拉菜單。當我點擊第一個菜單時，按預期打開。然後，當我點擊第二個下拉菜單時，第一個下拉菜單不會關閉。我該如何解決？我的腳本是問題嗎？任何幫助，將不勝感激。謝謝。
你能解決你的問題。如果我點擊了在codesnippet上運行的原因。我看不到任何下拉字段。 – Kordi
你好，我已經編輯了代碼 – java
我沒有在示例代碼中看到一個下拉列表：/ - 請修復問題到一個[mcve] – ochi