css - 跨越整个导航栏的下拉菜单
问题描述
好的,所以我正在上一个 Web 开发课程,我目前正在处理该课程的最后一个项目。我决定要在导航栏中有一个下拉菜单,所以我按照 w3schools 教程进行操作,但有一个小问题。下拉菜单虽然看起来不错,但似乎已经决定它的背景跨越整个导航栏听起来像是一个伟大的想法。这是它的外观
你们中的任何人都知道如何解决这个问题吗?这是我的代码
.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" alt="Homepage" 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>
解决方案
需要的修改很少,但我能够解决您上面提到的问题,希望对您有所帮助。
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" alt="Homepage" class="logo"></a>
</div>
</body>
推荐阅读
- django - xlwings || excel可见度问题
- azure - 在 az cli 中向 Azure 服务主体授予安全读者角色
- mongodb - 获取MongoDB中某个字段的最大值的文档
- android - NDK 项目 - 未能引用 fdsan 相关函数
- x509certificate - 节点js中的生成器证书和密钥vaya CA
- java - 如何在任何情况下(即使在打盹模式下)接收 FCM 通知并开始定期工作?
- android - Kotlin 中 globalScope 、 corountineScope 和 viewScope 的区别
- reactjs - 从 React 到活动目录的 ldap 连接
- python - 如何在 dost 数据中编码 None
- vb.net - 尝试通过 WebApi 2 发布文件时出现错误 500