时间戳

首页 > 解决方案 > 在移动设备和桌面设备上，单击“SERVICES”下拉菜单时，会自动选择“Rail”选项

html - 在移动设备和桌面设备上，单击“SERVICES”下拉菜单时，会自动选择“Rail”选项

问题描述

我一直在努力让我的标题响应，并且当它位于可折叠菜单中时，我真的在努力使用“服务”下拉部分。“静态”位置不仅看起来很糟糕，而且我想不出另一种方法。

我还有一个问题，当您在低于 768 像素时单击“服务”按钮时，它会自动选择第一个选项（“铁路”）。

我希望这是有道理的。我已经链接了下面的codepen。

enter code here 密码笔

header {
    background: linear-gradient(to right, #212529 0%, #495057 100%);
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    width: 100%;
    height: 80px;
    padding: 10px 2% 10px 2%;
    margin: 0;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    z-index: 100;
}

header ul {
    margin-block-end: 0;
}


header li, a {
    font-weight: 300;
    font-size: 1em;
    color:#ced4da;
    text-decoration: none;
    
}


.logo-header {
    max-height: 50px;
    cursor: pointer;
    padding: 0 15px;
}


.nav-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-links li {
    display: inline-block;
    padding: 0px 40px;
}

.nav-links li a {
    transition: all 0.3s ease 0s;
}

.nav-links li a:hover,
.nav-links li a:active {
    font-weight: 500;
    transition: all 0.3s ease 0s;
    color: #f8f9fa;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.social-icons {
    display: inline-block;
    padding: 0px 15px;
    
}

.social-icons a {
    margin: 0px 20px;   
    transition: all 0.3s ease 0s;


}

.social-icons a:hover {
    transition: all 0.3s ease 0s;
    color:#f8f9fa;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
  
}

.sticky + .services-title h1 {
    padding-top: 80px;
}

.sticky + .main-home {
    padding-top: 80px;
}

.sticky + .container-contact {
    padding-top: 80px;
}

.dropbtn {
    background-color: inherit;
    color: #ced4da;
    padding: 0 40px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    height: 80px;

  }

  .dropbtn:hover{
    font-weight: 500;
    transition: all 0.3s ease 0s;
    color: #f8f9fa;
    text-decoration: underline;
    text-underline-offset: 5px;
  }

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

  .dropdown-content {
    position: absolute;
    background:#343a40;
    min-width: 160px;
    overflow: auto;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    text-align: center;
    display: none;

  }
  
  .dropdown-content a {
    padding: 12px 16px;
    display: block;
    font-weight: 300;
    font-size: 1em;
    color:#ced4da;
    text-decoration: none;
  }
  
  .dropdown-content a:hover {
    font-weight: 500;
    transition: all 0.3s ease 0s;
    color: #f8f9fa;
    text-decoration: underline;
    text-underline-offset: 5px;
}

#home-header {
    position: fixed;
    top: 0;
    left: 0;
}

#nav-toggle {
    position: absolute;
    top: -100px;
}

nav .icon-burger {
    display: none;
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
}

nav .icon-burger .line {
    width: 30px;
    height: 5px;
    background: #fff;
    margin: 5px;
}

/*=====media queries=======*/

@media only screen and (max-width: 768px) {

  
    .nav-links {
        justify-content: space-evenly;
        float: none;
        position: fixed;
        z-index: 9;
        left: 0;
        right: 0;
        top: 80px;
        bottom: 100%;
        width: 100%;
        max-height: 200px;
        flex-direction: column;
        background-color: rgba(0, 0, 0, 0.7);
        overflow: hidden;
        transition: all .5s ease-in-out;
    }

    header :checked ~ .nav-links {
        bottom: 0;
    }

    .nav-links .dropbtn {
        padding: 0;
        width: 100%;
        height: 20px;
      
    }

    

  .dropdown-content {
      position: static;
      width: 100%;
      background-color: rgba(0, 0, 0, 0);
  }

    nav .icon-burger {
        display: block;
    }

    nav :checked ~ .icon-burger .line:nth-child(1) {
            transform: translateY(10px) rotate(225deg);
            transition: all .5s ease-in-out;
        }

    nav :checked ~ .icon-burger .line:nth-child(3) {
            transform: translateY(-10px) rotate(-225deg);
            transition: all .5s ease-in-out;
        }
    nav :checked ~ .icon-burger .line:nth-child(2) {
            opacity: 0;
            transition: all .5s ease-in-out;
        }
}

/* Medium devices (landscape tablets, 769px to 1024px) */
@media only screen and (max-width: 1024px) {

    header {
     padding-right: 0;
    }

    #social-icons-header a {
        display:none;
    }    
}
<header id="home-header" class="main-header-fixed">
        <img class="logo-header" src="Images/Logo grey Transparent.png" alt="Kompact Production Logo">
        <nav class="main-nav">
            <input id="nav-toggle" type="checkbox">
            <ul class=" nav-links">
                <li><a href="Kompact Home.html">HOME</a></li>
                <div class="dropdown">
                    <button class="dropbtn">SERVICES</button>
                    <div class="dropdown-content">
                        <a href="Kompact Rail Services.html">RAIL</a>
                        <a href="Kompact Event Services.html">EVENTS</a>
                    </div>
                </div>
                <li><a href="Kompact Portfolio.html">PORTFOLIO</a></li>
                <li><a href="Kompact Contact Us.html">CONTACT US</a></li>
            </ul>
            <label for="nav-toggle" class="icon-burger">
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
            </label>

        </nav>
        <div class="social-icons" id="social-icons-header">
            <a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                    class="bi bi-facebook" viewBox="0 0 16 16">
                    <path
                        d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
                </svg></a>
            <a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                    class="bi bi-instagram" viewBox="0 0 16 16">
                    <path
                        d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" />
                </svg></a>
            <a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                    class="bi bi-linkedin" viewBox="0 0 16 16">
                    <path
                        d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" />
                </svg></a>
        </div>
</header>

标签： htmlcssdrop-down-menuclickresponsive

解决方案

谢谢你，但我确实理解它发生的原因，并且理解我可以在元素上放置一个过渡属性，但我最希望发生的事情是让“RAIL”和“EVENT”以 100% 的形式下降元素并向下推“投资组合”。

我希望在下拉菜单低于 768 像素时发生这种情况。

关于在移动视图中选择的“铁路”，我再次了解正在发生的事情，但正在寻求有关如何解决此问题并使其更加用户友好的建议

推荐阅读