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 выпадающих меню. Когда я нажимаю на 1-е меню, он открывается, как ожидалось. Затем, когда я нажимаю на второй выпадающий список, первый раскрывающийся список не будет закрыт. Как это исправить? Является ли мой сценарий проблемой? Любая помощь будет оценена по достоинству. Спасибо.
Вы можете исправить ваш вопрос. Причина, если я нажимаю пробел на codenippet. Я не вижу ни одного раскрывающегося поля. – Kordi
привет, я уже редактирую код – java
Я не вижу выпадающего списка в примере кода:/- пожалуйста, исправьте вопрос в [mcve] – ochi