Question

我已经在菜单中添加了一个基本的可单击的下拉按钮，但是无法自定义，甚至无法在实时网站上显示更改。并且下拉菜单内容不会出现在单独的行中：

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

我已经搜索了与我的问题有关的google，但是搜索到的所有内容均无效。我做错什么了吗

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
  if (!e.target.matches('.button')) {
    var myDropdown = document.getElementById("myDropdown");
    if (myDropdown.classList.contains('show')) {
      myDropdown.classList.remove('show');
    }
  }
}

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;
}

li.navbar {
  overflow: hidden;
  background-color: transparent;
  font-family: Arial, Helvetica, sans-serif;
  float: right;
  padding-right: 100px;
}

li.navbar a {
  float: left;
  font-size: 16px;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown-menu {
  float: left;
  overflow: hidden;
}

.dropdown-menu .button {
  cursor: pointer;
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

li.navbar a:hover,
.dropdown-menu:hover .button,
.button:focus {
  background-color: red;
}

.dropdown-menu-content {
  color: #fff;
  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;
}

.dropdown-menu-content a {
  float: left;
  color: red;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-menu-content a:hover {
  background-color: #ddd;
}

.show {
  display: block;
}

.navbar-nav .open .dropdown-menu .button {
  cursor: pointer;
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>Title Here</title>
  <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?v=12345">
</head>

<body>
  <div class="nav-menu">
    <ul>
      <a href="#"><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 class="navbar">
        <div class="dropdown-menu">
          <button class="button" onclick="myFunction()">
    <i class="fas fa-user"></i>
  </button>
          <div class="dropdown-menu-content" id="myDropdown">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
          </div>

      </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>
      </li>

      </div>
      </li>
    </ul>

Answer 1

您是否尝试过像

这样更具体地编写css

.navbar-nav .open .dropdown-menu .button {
  cursor: pointer;
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

但是，如果您的意思是将其本地应用而不是部署到实时站点上，则可能是由于浏览器对CSS进行缓存所致，在这种情况下，您可以使用缓存清除{{3} }就像在链接CSS时在url的末尾附加查询字符串（唯一），例如 <link rel="stylesheet" type="text/css" href="./path/to/cssfile.css?v=12345">.

Answer 2

我已经尝试过您的代码，应该没有问题。我认为这是因为您的风格被其他课程所取代。您可以使用浏览器检查器进行检查。在这种情况下，您应该使用!important这样优先考虑CSS的使用

.dropdown-menu-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block !important;
  text-align: left;
}

您可以在此处找到有关CSS特异性的更多信息 https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

下拉按钮未自定义

2 个答案: