为什么窗口较小时下拉菜单不显示所有内容？

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

我是 html 和 css 新手。

我一直在使用 CodePen 构建一个模拟网站来积累使用它们的经验，但我遇到了一个障碍，一些障碍。目前最烦人的是，当调整窗口大小时，下拉列表仅显示其中 1 个链接。修改属性标签以合并附加数字或字母，或者完全选择不同的标签，似乎会导致链接无效或将鼠标悬停在链接上时显示文本光标。

我已经嵌入了代码（希望如此）

如果没有，以下链接将带您到笔：

https://codepen.io/Jessica-Rigby-White/pen/Pogoavd

<html lang="en">
<!-- SECTIONALLY ORGANISED CODE -->
<!-- Load an icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/9c954d7811.js" crossorigin="anonymous"></script>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <style>
    body {
      Margin: 0px;
      font-family: Arial, Helvetica, sans-serif;
      background-color: rgb(255, 154, 48);
    }

    /* v POSITIONING NOT WORKING v */
    .dark-mode {
      background-color: black;
      color: white;
      border-colour: black;
    }

    .button1 {
      text-align: RIGHT;
      position: fixed;
      float: right;
      padding: 6px;
      margin: 8px;
      background-color: rgb(255, 255, 255, 0.2);
    }

    /* ^ POSITIONING NOT WORKING ^ */
    /* O-TOPNAVIGATION */
    /* O-MAIN-NAV */
    .topnav {
      overflow: hidden;
      background-color: rgb(255, 255, 255, 0.2);
      border: 3px solid rgb(255, 144, 26, 0.01);
      border-right-style: none;
      border-left-style: none;
    }

    .topnav .icon {
      display: none;
    }

    .topnav a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 6px;
      text-decoration: none;
      font-size: 17px;
    }

    .topnav a:hover {
      background-color: rgb(255, 144, 26, 0.5);
      color: black;
      padding: 6px;
      margin: 8px;
      border-radius: 50px;
    }

    /* X-MAIN-NAV */
    /* O-PROFILE */
    .dropdown {
      float: right;
      overflow: hidden;
    }

    .dropdown .dropbtn {
      font-size: 16px;
      border: none;
      outline: none;
      color: white;
      padding: 14px 16px;
      background-color: inherit;
      font-family: inherit;
      margin: 0;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: black;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
      right: 0px;
      border-radius: 8px;
    }

    .dropdown-content a {
      float: none;
      color: #ff901a;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }

    .dropdown-content a:hover {
      background-color: rgb(255, 144, 26);
      color: black;
      font-weight: bold;
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }

    .dropdown:hover .dropbtn {
      background-color: rgb(255, 144, 26);
      color: black;
      padding: 6px;
      margin: 8px;
      border-radius: 50px;
      font-weight: bold;
    }

    /* X-PROFILE */
    /* O-SEARCH */
    .search-container form {
      border-radius: 50px;
      background-color: none;
      margin: 8px;
    }

    .search-container input {
      border-radius: 50px;
      border: none;
      background-color: rgb(255, 144, 26, 0.5);
      font-size: 17px;
      padding: 6px;
      margin-left: 1%;
    }

    .search-container button {
      padding: 6px 10px;
      background: rgb(255, 144, 26, 0.5);
      font-size: 17px;
      border: none;
      outline: none;
      cursor: pointer;
      colour: white;
      border-radius: 50px;
    }

    .search-icon {
      color: white;
    }

    ::placeholder {
      color: White;
    }

    .search-icon :hover {
      color: black;
    }

    .search-container form :hover {}

    /* X-SEARCH */
    /* X-TOPNAVIGATION */
    /* O-HEADING */
    .Heading {
      padding: 15px;
      text-align: left;
      border: 3px solid rgb(255, 255, 255, 0.2);
      border-right-style: none;
      border-left-style: none;
    }

    .Heading p1 {
      float: none;
      margin-left: 10px;
      font-weight: bold;
      font-size: 20px;
      colour: red;
    }

    .Heading p2 {
      float: none;
      margin: 8px;
      font-size: 10px;
    }

    /* X-HEADING */
    /* O-PAGETABS */
    /* Style tab links */
    .tablink {
      background-color: rgb(255, 255, 255, 0.2);
      color: white;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 14px 16px;
      font-size: 17px;
      width: 25%;
      font-weight: bold;
    }

    /* Style the tab content (and add height:100% for full page content) */
    .tabcontent {
      color: white;
      display: none;
      padding: 100px 20px;
      height: 100%;
    }

    #Home {
      background-color: rgb(255, 144, 26, 0.01);
    }

    #Timeline {
      background-color: rgb(255, 144, 26, 0.01);
    }

    #Contact {
      background-color: rgb(255, 144, 26, 0.01);
    }

    #About {
      background-color: rgb(255, 144, 26, 0.01);
    }

    .tablink:hover {
      background-color: rgb(255, 144, 26, 1);
      colour: black;
    }

    /* X-PAGETABS */
    /* O-SOCIALBAR */
    .icon-bar {
      position: fixed;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    }

    .icon-bar da {
      display: block;
      text-align: center;
      padding: 16px;
      transition: all 0.3s ease;
      color: white;
      font-size: 20px;
      border-radius: 10px 10px 10px 0px;
    }

    .icon-bar db {
      display: block;
      text-align: center;
      padding: 16px;
      transition: all 0.3s ease;
      color: white;
      font-size: 20px;
      border-radius: 0px 10px 10px 0px;
    }

    .icon-bar dc {
      display: block;
      text-align: center;
      padding: 16px;
      transition: all 0.3s ease;
      color: white;
      font-size: 20px;
      border-radius: 0px 10px 10px 0px;
    }

    .icon-bar de {
      display: block;
      text-align: center;
      padding: 16px;
      transition: all 0.3s ease;
      color: white;
      font-size: 20px;
      border-radius: 0px 10px 10px 10px;
    }

    .facebook {
      background: rgb(255, 255, 255, 0.2);
    }

    .google {
      background: rgb(255, 255, 255, 0.2);
    }

    .linkedin {
      background: rgb(255, 255, 255, 0.2);
    }

    .codepen {
      background: rgb(255, 255, 255, 0.2);
    }

    .content {
      margin-left: 75px;
      font-size: 30px;
    }

    .icon-bar da:hover {
      background-color: #3B5998;
    }

    .icon-bar db:hover {
      background-color: #dd4b39;
    }

    .icon-bar dc:hover {
      background-color: #007bb5;
    }

    .icon-bar de:hover {
      background-color: #000000;
    }

    /* X-SOCIALBAR */
    /* O-PAGINATION */
    .pagination {
      margin: 10px;
      text-align: center;
      position: fixed;
      bottom: 0;
      WIDTH: 100%;
      font-size: 17px;
    }

    .pagination c {
      color: white;
      float: NONE;
      padding: 5px 5px;
      text-decoration: none;
      transition: background-color .3s;
      text-decoration: none;
      margin: 0px;
    }

    .pagination c.active {
      background-color: rgb(255, 255, 255, 0.2);
      color: black;
    }

    .pagination c:hover:not(.active) {
      background-color: rgb(255, 255, 255, 0.2);
    }

    /* X-PAGINATION */
    /*<MEDIA SETTINGS>*/
    @media screen and (max-width: 600px) {
      .topnav a:not(:first-child) {
        display: none;
      }

      .topnav a.icon {
        float: right;
        display: block;
      }
    }

    @media screen and (max-width: 600px) {
      .topnav.responsive {
        position: relative;
      }

      .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
      }

      .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
      }

      .search-container.resposive form {
        border-radius: 50px;
        background-color: none;
        margin: 8px;
        float: right;
      }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
    }

    /*</MEDIA SETTINGS>*/
  </style>
</head>

<body>
  <!-- O-TOPNAVIGATION -->
  <!-- O-MAIN-NAV -->
  <div class="topnav" id="myTopnav">
    <a class="#home" href="#"><i class="fa fa-fw fa-home"></i></a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
    <!-- X-MAIN-NAV -->
    <!-- O-HAMBURGER -->
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i></a>
    <!-- X-HAMBURGER -->
    <!-- O-PROFILE -->
    <div class="dropdown">
      <button class="dropbtn">
        <i class="fa fa-fw fa-user"></i>
      </button>
      <div class="dropdown-content">
        <a class="Login" href="https://codepen.io/Jessica-Rigby-White/full/PogoaMd"><i></i>Login</a>
        <a href="#">News</a>
        <a href="#">Contact</a>
        <a href="#">About</a>
      </div>
    </div>
    <!-- X-PROFILE -->
    <!-- O-SEARCH -->
    <div class="search-container">
      <form action="/action_page.php">
        <input type="text" placeholder="Search.." name="search">
        <button type="submit" class="search-icon"><i class="fa fa-search"></i></button>
      </form>
    </div>
    <!-- X-SEARCH -->
  </div>
  <!-- X-TOPNAVIGATION -->
  <!-- O-HEADING -->
  <div class="Heading">
    <p1 class="p1-heading" style="color:white;">NOOB IS LEARNING</p1>
    <p2 class="p2-heading" style="color:white;">SLOWLY..</p2>
  </div>
  <!-- X-HEADING -->
  <!-- O-TABS -->
  <div class="Tab" id="myTab">
    <button class="tablink" onclick="openPage('Home', this, 'rgb(255, 144, 26, 0.1)')">Home</button>
    <button class="tablink" onclick="openPage('Timeline', this, 'rgb(255, 144, 26, 0.1)')" id="defaultOpen">Timeline</button>
    <button class="tablink" onclick="openPage('About', this, 'rgb(255, 144, 26, 0.1)')">About</button>
    <button class="tablink" onclick="openPage('Contact', this, 'rgb(255, 144, 26, 0.1)')">Contact</button>

    <div id="Home" class="tabcontent">
      <h3>Home</h3>
      <p3>Home is where the heart is..</p3>
    </div>

    <div id="Timeline" class="tabcontent">
      <h3>Timeline</h3>
      <p3>Some news this fine day!</p3>
    </div>
    <div id="About" class="tabcontent">
      <h3>About</h3>
      <p3>Who we are and what we do.</p3>
    </div>
    <div id="Contact" class="tabcontent">
      <h3>Contact</h3>
      <p3>Get in touch, or swing by for a cup of coffee.</p3>
    </div>
    <!-- X-TABS -->
    <!-- O-SOCIALBAR -->
    <div class="icon-bar">
      <da href="#" class="facebook"><i class="fa fa-facebook" style="color: #ffffff;"></i></da>
      <db href="#" class="google"><i class="fa fa-google"></i></db>
      <dc href="#" class="linkedin"><i class="fa-brands fa-linkedin"></i></dc>
      <de href="#" class="codepen"><i class="fa-brands fa-codepen" style="color: #ffffff;"></i></de>
    </div>
  </div>
  <!-- X-SOCIALBAR -->
  <!-- O-PAGINATION -->
  <div class="pagination">
    <c href="#">&laquo;</c>
    <c class="active" href="#">1</c>
    <c href="#">2</c>
    <c href="#">3</c>
    <c href="#">4</c>
    <c href="#">5</c>
    <c href="#">6</c>
    <c href="#">&raquo;</c>
  </div>
  <!-- X-PAGINATION -->
  <div class="darkbutton" id="mydarkbutton">
    <button1 class="Darkmode" onclick="Darkmode()"><i class="fa-solid fa-circle-half-stroke"></i></button1>
  </div>
  <!-- X-PAGINATION -->
  <script>
    // O-TOPNAVIGATION
    function myFunction() {
      var x = document.getElementById("myTopnav");
      if (x.className === "topnav") {
        x.className += " responsive";
      } else {
        x.className = "topnav";
      }
    }
    // X-TOPNAVIGATION
    // O-TABS
    function openPage(pageName, elmnt, color) {
      var i, tabcontent, tablinks;
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
      }
      tablinks = document.getElementsByClassName("tablink");
      for (i = 0; i < tablinks.length; i++) {
        tablinks[i].style.backgroundColor = "";
      }
      document.getElementById(pageName).style.display = "block";
      elmnt.style.backgroundColor = color;
    }
    // Get the element with id="defaultOpen" and click on it
    document.getElementById("defaultOpen").click();
    // X-TABS
    // O-DARKMODE
    function Darkmode() {
      var element = document.body;
      element.classList.toggle("dark-mode");
    }
    // X-DARKMODE
  </script>

</body>

</html>
html css dropdown responsive
1个回答
0
投票

您可以使用浏览器的开发工具来检查元素。您可能需要将状态 

:hover
设置为 
.dropdown
按钮，以使菜单出现并保持。然后你检查并看到 HTML 在那里，所以它一定是一些 CSS 规则。罪魁祸首就是这个：

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {
    display: none;
  }
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.