Раскрывающийся список, охватывающий всю панель навигации - PullRequest
Новая
       7

Раскрывающийся список, охватывающий всю панель навигации

0 голосов
/ 02 апреля 2020

Хорошо, я занимаюсь веб-разработкой и сейчас работаю над последним проектом курса. Я решил, что хочу выпадающее меню в панели навигации, поэтому я следовал за ним руководством 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>

1 Ответ

0 голосов
/ 02 апреля 2020

Требовалось несколько изменений, но я смог исправить проблему, о которой вы упоминали выше, надеюсь, это поможет. 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...