跨越整个导航栏的下拉菜单
Posted
技术标签:
【中文标题】跨越整个导航栏的下拉菜单【英文标题】：Dropdown spanning the entire navbar 【发布时间】：2020-07-14 01:46:37 【问题描述】：好的，我正在上一门网络开发课程，目前正在处理课程的最后一个项目。我决定在导航栏中有一个下拉菜单，所以我按照 w3schools 教程进行操作，但有一个小问题。下拉菜单虽然看起来不错，但似乎已经决定它的背景跨越整个导航栏听起来像是一个伟大的想法。 Here's how it looks
你们都知道如何解决这个问题吗？这是我的代码
.menu
overflow: hidden;
background-color: #000;
max-width: 100%;
position:relative;
top: -120px;
font-size: 16px;
.menu a
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
.menu a:link
.menu a:visited
text-decoration: none;
.active
background-color: #C00;
.dropdown
float: left;
overflow: hidden;
.dropdown .dopbtn
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
.menu a:hover, .dropdown:hover .dropbtn
background-color: #9B0000;
.dropdown-content
display: none;
position: static;
background-color: black;
max-width: 160px;
box-shadow: 0px 8px 16px 0px grey;
z-index: 1;
.dropdown-content a
float: left;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
.dropdown-content a:hover
background-color: #7B0002;
.dropdown:hover .dropdown-content
display: block;
<html xmlns="http://www.w3.org/1999/xhtml">
<Head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="CSS/Candlekeep.css" />
<title>Home-Candlekeep</title>
</Head>
<Body class="homepage">
<header>
<link href="https://fonts.googleapis.com/css?family=MedievalSharp&display=swap" rel="stylesheet">
<div class="hwrap">
<a href="Home.html"><img src="IMG/Logo.png" class="logo"></a>
</div>
<h1 class="logtxt"><a href="Home.html">Candlekeep</a></h1>
</header>
<nav>
<div class="menu">
<a href="Home.html" class="active">Home</a>
<div class="dropdown">
<a href="DMs.html" class="dropbtn">Dungeon Masters
<i class="fa fa-caret-down"></i>
</a>
<div class="dropdown-content">
<a href="Phooks.html">Plot Hooks</a>
<a href="Maps.html">Maps</a>
<a href="Trap.html">Traps & Puzzles</a>
<a href="Name.html">Names & Locations</a>
<a href="campaign.html">Campaign Management</a>
<a href="Encount.html">Encounters</a>
<a href="Sheet.html">Character Sheets</a>
</div>
</div>
<a href="Player.html">Players</a>
<a href="Rsrc.html">General Resources</a>
</div>
</nav>
</body>
</html>【问题讨论】：
【参考方案1】：需要进行一些修改，但我能够解决您上面提到的问题，希望对您有所帮助。
body
background-color: gray;
padding: 0;
margin: 0;
.menu
background-color: #000;
position: relative;
font-size: 16px;
height: 32px;
.menu a
color: white;
text-align: center;
text-decoration: none;
padding: 14px 20px;
.menu a:link .menu a:visited
text-decoration: none;
.active
background-color: #C00;
.dropbtn
color: white;
font-size: 16px;
border: none;
.dropdown
position: relative;
display: inline-block;
.dropdown-content
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
.dropdown-content a
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
.menu a:hover,
.dropdown:hover .dropbtn
background-color: #9B0000;
.dropdown-content a:hover
display: block;
background-color: #7B0002;
.dropdown:hover .dropdown-content
display: block;
<body class="homepage">
<header>
<link href="https://fonts.googleapis.com/css?family=MedievalSharp&display=swap" rel="stylesheet">
</header>
<nav>
<div class="menu">
<a href="Home.html" class="active">Home</a>
<div class="dropdown">
<a href="DMs.html" class="dropbtn">Dungeon Masters
<i class="fa fa-caret-down"></i>
</a>
<div class="dropdown-content">
<a href="Phooks.html">Plot Hooks</a>
<a href="Maps.html">Maps</a>
<a href="Trap.html">Traps & Puzzles</a>
<a href="Name.html">Names & Locations</a>
<a href="campaign.html">Campaign Management</a>
<a href="Encount.html">Encounters</a>
<a href="Sheet.html">Character Sheets</a>
</div>
</div>
<a href="Player.html">Players</a>
<a href="Rsrc.html">General Resources</a>
</div>
</nav>
<h1 class="logtxt"><a href="Home.html">Candlekeep</a></h1>
<div class="hwrap">
<a href="Home.html"><img src="IMG/Logo.png" class="logo"></a>
</div>
</body>【讨论】：
以上是关于跨越整个导航栏的下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章