Question

我有一个下拉菜单按钮，还有一个选择下拉按钮，当单击选择菜单时，它会自动关闭，并使用普通菜单按钮登录。

以下是我所指的屏幕截图：

我已经在互联网上搜索了有关此问题的信息，但找不到与该问题有关的任何信息。

我的HTML代码是：





body {
	margin: 0 ;
  padding: 0;
	margin-top: 130px;
  overflow-x: hidden;
}
.nav-menu a img {
	float: left;
	margin-left: 10px;
}
.nav-menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.9);
  margin-top: -130px;
}
.nav-menu li {
  float: left;
}
.nav-menu li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.nav-menu li a:hover, .dropdown:hover .dropbtn {
  border-top: 2px solid #ff0000;
}
.nav-menu li.dropdown {
  display: inline-block;
}
.nav-menu .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.nav-menu .dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.nav-menu .dropdown-content a:hover {
  background-color: #ff0000;
  color: #fff;
}
.nav-menu .dropdown:hover .dropdown-content {
  display: block;
}
.nav-menu li.social {
  float: right;
  padding-right: 100px;
}




























.nav-menu .social .infobtn {
  background-color: transparent;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.nav-menu .social .infobtn:hover, .nav-menu .social li.infobtn:focus {
  border-top: 2px solid #ff0000 !important;
}

li.info .nav-menu .social{
  position: relative;
  display: inline-block;
  float: right
}

.info-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.info-content a {
  color: #000 !important;
  padding: 12px 16px;
  text-decoration: none;
  display: block !important;
}

.info a:hover {
  background-color: #ff0000;
  color: #fff !important;
}

.show {
  display: block;
}
















.language-selector select {
  width: 200px;
  padding: 10px 20px;
  margin-bottom: 25px;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
  cursor: pointer;
}
.globe::after {
  font-family: "Font Awesome 5 Free";
  content: "\f0ac";
  visibility: visible;
  font-weight: 900;
  display: inline-block;
  float: right;
  position: relative;
  z-index: 2;
  margin-top: -50px;
  margin-right: 15px;
}
.language-selector select::-ms-expand {
  display: none;
}
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="CSS/style.css">
</head>
<body>
	<div class="nav-menu">
	<ul>
		<a href="#"><img src="img/logo.jpg" style="width:50px"></a>
		<a href="index.html"><img src="img/logo.jpg" style="width:50px"></a>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Games</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Crews</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>






  <li><a href="#">Jobs</a></li>
  <li><a href="#">Photos</a></li>
  <li><a href="#">Videos</a></li>
  <li><a href="#">Events</a></li>
  <li><a href="#">News</a></li>
  
</li>
  <li class="social">
  	<a href="#">Sign In</a>
  	<a href="#" style="color:#ff0000">Sign Up</a>
  	<a href="#"><i class="fas fa-search"></i></a>
  <button onclick="myFunction()" class="infobtn"><i class="fas fa-user"></i></button>
  <div id="information" class="info-content">
    <a href="#">Legal</a>
    <a href="#">Privacy</a>
    <a href="#">Support</a>
    <a href="#">Cookies</a>
    <hr>
    	
    </hr>
<div class="language-selector">
<select>
	<option value="en-US">English</option>
	<option value="de-DE">Deutsch</option>
	<option value="es-ES">Español</option>
	<option value="es-MX">Español Latinoamérica</option>
	<option value="fr-FR">Français</option>
	<option value="it-IT">Italiano</option>
	<option value="ja-JP">日本語</option>
	<option value="ko-KR">한국어</option>
	<option value="pl-PL">Polski</option>
	<option value="pt-BR">Português do Brasil</option>
	<option value="ru-RU">Русский</option>
	<option value="zh-TW">繁體中文</option>
	<option value="zh-CN">简体中文</option>
</select>
    <div class="globe"></div>
  </li>
</ul>

任何帮助表示感谢，并提前谢谢您。

Answer 1

看起来您可能在某处缺少一些结束标记（我认为是<div class="language-selector">和<div id="information" class="info-content">），但是用这种缩进很难分辨。可能不是确切的解决方案，但可以帮上忙吗？

在下拉菜单中选择下拉菜单，然后单击选择按钮，整个下拉菜单将关闭

1 个答案: