0
我試圖創建一個靈活的導航欄，在較小的屏幕上有一個下拉菜單。我基於它的https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav靈活的導航欄在較小的屏幕上打破
下拉菜單在較小的屏幕上打破。我在這個詞上面有圖標。所以，而不是「家庭之家」它有一個房子的圖標，而不是第一個家的標題下。
// FUNCTION FOR NAV BAR //
function myfunction() {
var topNavX = document.getElementById("myTopnav");
if (topNavX.className === "topnav") {
topNavX.className += "responsive";
} else {
topNavX.className = "topnav";
}
}.topnav {
\t background-color: #66FCF1;
\t overflow: auto;
\t display: flex;
\t margin-top: 15px;
\t margin-left: 2%;
\t margin-right: 2%;
\t border-radius: 10px;
\t text-align: justify;
}
.topnav:after{
\t content: '';
}
/* Style the links inside the navigation bar */
.topnav a {
\t float: left;
\t display: block;
\t color: black;
\t text-align: center;
\t padding: 14px 16px;
\t text-decoration: none;
\t font-size: 17px;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
\t .topnav a:not(:first-child) {display: none;}
\t .topnav a.icon {
\t \t float: right;
\t \t display: block;
\t }
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
\t .topnav.responsive {position: relative;}
\t .topnav.responsive .iconJS {
\t \t position: absolute;
\t \t right: 0;
\t \t top: 0;
\t }
\t .topnav.responsive a {
\t \t float: none;
\t \t display: block;
\t \t text-align: left;
\t }
}
/* ABOUT ON TOP NAV BAR */
#topNavAbout {
\t flex: 1;
\t font-family: "Walter Turncoat";
\t font-weight: bold;
\t line-height: 160%;
}
/* ABOUT ON TOP NAV BAR ON HOVER */
#topNavAbout:hover {
\t background-color: darkgoldenrod;
}
/* A TO Z ON TOP NAV */
#topNavAlpha {
\t flex: 1;
\t font-family: "Cinzel Decorative";
\t font-weight: bold;
\t line-height: 160%;
}
/* A TO Z ON TOP NAV ON HOVER */
#topNavAlpha:hover {
\t background-color: darkviolet;
}
/* FLEX AND FONT FOR CHEESY IN NAV BAR */
#topNavCheesy {
\t flex: 1;
\t font-family: "Bad Script";
\t font-weight: 900;
\t line-height: 160%;
\t font-size: 1.1em;
}
/* TOP NAV CHEESY ON HOVER */
#topNavCheesy:hover{
\t background-color: #FF0;
}
/* CLASSIC ON TOP NAV BAR */
#topNavClassic {
\t flex: 1;
\t font-family: "Sofia";
\t font-weight: bold;
\t font-size: 1.3em;
\t line-height: 150%;
}
/* CLASSIC ON TOP NAV BAR ON HOVER */
#topNavClassic:hover {
\t background-color: burlywood;
}
#topNavDonate {
\t flex: 1;
\t font-family: "Verdana";
\t font-weight: bold;
\t line-height: 170%;
}
#topNavDonate:hover {
\t background-color: #009CDE;
}
/* CHANGED TEXT ON MAIN NAV BAR */
#topNavFav {
\t font-family: "Permanent Marker";
\t flex: 1;
\t line-height: 160%;
}
/* FAVORITE HOVER ON NAV BAR */
#topNavFav:hover {
\t background-color: #00FF00;
}
/* GAME ON TOP NAV */
#topNavGame {
\t flex: 1;
\t font-family: "Monoton";
\t font-weight: bold;
}
/* GAME ON TOP NAV ON HOVER */
#topNavGame:hover {
\t background-color: orange;
}
/* CHANGED TEXT ON MAIN NAV BAR */
#topNavGod {
\t flex: 1;
\t font-family: "Finger Paint";
\t font-size: .86em;
\t font-weight: bold;
\t line-height: 190%;
}
/* GOD-AWFUL ON HOVER OVER MAIN NAV BAR */
#topNavGod:hover {
\t background-color: white;
}
/* NAV BAR GROSS */
#topNavGross {
\t flex: 1;
\t font-family: "Nosifer";
}
/* GROSS ON MAIN NAV BAR ON HOVER */
#topNavGross:hover {
\t background-color: #F00;
}
/* Home ICON and TEXT */
.topNavHome {
\t flex: 1;
\t font-family: "Sedgwick Ave";
\t font-weight: bold;
\t line-height: 150%;
}
/* ROULETTE ON TOP NAV */
#topNavRoul {
\t flex: 1;
\t font-family: "Marck Script";
\t font-weight: bold;
\t font-size: 1.5em;
}
/* ROULETTE ON TOP NAV ON HOVER */
#topNavRoul:hover {
\t background-color: crimson;
}
/* WTF ON MAIN NAV BAR */
#topNavWTF {
\t flex: 1;
\t font-family: "Rock Salt";
\t font-size: .75em;
\t font-weight: bold;
}
/* WTF ON MAIN NAV BAR ON HOVER */
#topNavWTF:hover {
\t background-color: fuchsia;
} <!-- MAIN NAV BAR -->
<div class="topnav" id="myTopnav">
<a class="topNavHome" id="current0" href="https://www.alansmitheepicks.com"><img src="icons/home.png" title="Home" alt="Home"><br>Home</a>
<a id="topNavFav" href="favorites.html"><img src="icons/fav.png" title="Favorites" alt="Favorites"><br>Favorites</a>
<a id="topNavCheesy" href="cheesy.html"><img src="icons/cheese.png" title="Cheesy" alt="Cheesy"><br>Cheesy</a>
<a id="topNavGod" href="godawful.html"><img src="icons/godawful.png" title="God Awful" alt="God Awful"><br>Godawful</a>
<a id="topNavWTF" href="wtf.html"><img src="icons/wtf.png" title="WTF" alt="WTF?!"><br>W...T...F?!</a>
<a id="topNavGross" href="gross.html"><img src="icons/gross.png" title="Gross" alt="Gross"><br>Gross</a>
<a id="topNavClassic" href="classic.html"><img src="icons/classic.png" title="Classic" alt="Classics"><br>Classic</a>
<a id="topNavAlpha" href="atoz.html"><img src="icons/atoz.png" title="A to Z" alt="Search A-Z"><br>A to Z</a>
<a id="topNavGame" href="game.html"><img src="icons/game.png" title="Game" alt="Game"><br>Game</a>
<a id="topNavRoul" href="roulette.html"><img src="icons/roulette.png" title="Roulette" alt="Roulette"><br>Roulette</a>
<a id="topNavDonate" href="donate.html"><img src="icons/paypal.png" title="Donate" alt="Donate"><br>Donate</a>
<a id="topNavAbout" href="about.html"><img src="icons/clapper.png" title="About Us" alt="Who is Alan Smithee?"><br>About</a>
<a href="#" class="icon" onclick=myFunction()>☰</a>
</div>
你好，歡迎來到SO ..你的問題是？請參閱[我如何提出一個好問題？]（https://stackoverflow.com/help/how-to-ask） – rmjoia
「*下拉菜單打破*」並沒有告訴我們什麼 - 開心的是什麼？它不顯示？它會影響下面的內容嗎？它是否顯示不正確？如果是，它應該如何顯示？它是如何顯示的？ – FluffyKitten