下拉按钮不是自定义的

问题描述 投票：0回答：2

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

这是我所指的截图：

https://imgur.com/hzKm7WI

我搜索了与我的问题相关的谷歌，但我搜索的所有内容都无效。难道我做错了什么

/* 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>
javascript html css
2个回答
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缓存，在这种情况下，您可以使用缓存清除strategy，如在URL的末尾附加查询字符串（唯一）当连接css，例如<link rel="stylesheet" type="text/css" href="./path/to/cssfile.css?v=12345">.

0
投票

我已经尝试了你的代码，应该没有问题。我认为这是因为你的风格被另一个阶级所覆盖。您可以使用浏览器检查器进行检查。在这种情况下，你应该像这样使用!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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.