固定菜單中的下拉菜單

Question

我的問題是關於固定topnav中的下拉菜單。 當我單擊“配置文件”下拉菜單時，下拉菜單會更改topnav的大小。 我不希望下拉菜單更改topnav的尺寸。 我怎樣才能解決這個問題？

我的topnav固定在頂部，為此我使用了引導程序。

以及如何在下拉菜單中將按鈕的大小設為按鈕大小。

 function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } 

 .topnav { overflow: hidden; background-color: #333; box-shadow: 0 8px 6px -6px black; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .actives { background-color: #4CAF50; color:black; } .topnav .icon { display: none; } .dropdown { float: right; overflow: hidden; } .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 5px; background-color: inherit; font-family: inherit; margin: 0; } .dropdown-content { display: none; position: static; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .topnav a:hover, .dropdown:hover .dropbtn { background-color: #ddd; color: black; } .dropdown-content a:hover { background-color: #ddd; color: black; } .dropdown:hover .dropdown-content { display: block; } @media screen and (max-width: 600px) { .topnav a:not(:first-child), .dropdown .dropbtn { 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; } .topnav.responsive .dropdown {float: none;} .topnav.responsive .dropdown-content {position: relative;} .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <!-- Nav bar --> <div class="sticky-top"> <div class="topnav" id="myTopnav"> <a href="index.php" class="actives">Početna</a> <a href="#about">O nama</a> <a href="products.php">Proizvodi</a> <a href="contact.php">Kontakt</a> <div class="dropdown"> <button class="dropbtn">Profil <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="">Dodaj proizvod</a> <a href="">Odjava</a> </div> </div> <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a> </div> </div> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> 

Answer 1

請放在css下面

.sticky-top #myTopnav .dropdown {
    position: absolute;
    right: 0;
}

Answer 2

添加Fixed位置並right 0和top 50px

.dropdown-content {
        display: none;
        position: fixed;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        right:0;
        top: 50px;
    }

 function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } 

 .topnav { overflow: hidden; background-color: #333; box-shadow: 0 8px 6px -6px black; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .actives { background-color: #4CAF50; color:black; } .topnav .icon { display: none; } .dropdown { float: right; overflow: hidden; } .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 5px; background-color: inherit; font-family: inherit; margin: 0; } .dropdown-content { display: none; position: fixed; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); right:0; top:50px; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .topnav a:hover, .dropdown:hover .dropbtn { background-color: #ddd; color: black; } .dropdown-content a:hover { background-color: #ddd; color: black; } .dropdown:hover .dropdown-content { display: block; } @media screen and (max-width: 600px) { .topnav a:not(:first-child), .dropdown .dropbtn { 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; } .dropdown-content {top:0;} .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown {float: none;} .topnav.responsive .dropdown-content {position: relative;} .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <!-- Nav bar --> <div class="sticky-top"> <div class="topnav" id="myTopnav"> <a href="index.php" class="actives">Početna</a> <a href="#about">O nama</a> <a href="products.php">Proizvodi</a> <a href="contact.php">Kontakt</a> <div class="dropdown"> <button class="dropbtn">Profil <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="">Dodaj proizvod</a> <a href="">Odjava</a> </div> </div> <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a> </div> </div> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br>