Моя выпадающая панель навигации не будет отображаться перед текстом - PullRequest
Новая
       15

Моя выпадающая панель навигации не будет отображаться перед текстом

0 голосов
/ 27 августа 2018

Hello

Недавно я делал сайт и делал выпадающую панель навигации. Дело в том, что всякий раз, когда я вставляю текст и наводлю курсор на панель навигации, он не покрывает текст. Я немного искал по переполнению стека, и все, что я пробовал, не сработало. Я пробовал "позиция: абсолютная;", "z-index: 1000;" и т.д. Мне было интересно, если бы я создал свой собственный форум, кто-нибудь мог бы мне помочь. Internet Explorer, Google Chrome и Microsoft Edge не работают. Спасибо за ответ. 

/*Title*/

html, body {
	margin: 0;
	padding: 0;
	font-family: Cursive, Sans-Serif;
}

#header {
	width: auto;
	height: 10px;
	padding: 1% 1% 1% 2%;
	background-color: #5e0d0d;
	box-shadow: 1px 1px 2px 2px #262626;
}

#header #title {
	font-family: "Open Sans", "Segoe UI";
	font-size: 150%;
	font-weight: lighter;
	color: #fff;
	text-decoration: none;
	float: left;
	margin-top: -.65%;
}

/*Navigation Bar*/

ul {
	font-family: Arial;
	margin: 0px;
	padding: 0px;
	list-style: none;
}

ul li {
	float: left;
	width: 200px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-size: 20px;
	margin-top: -.60%
}

ul li a {
	text-decoration: none;
	color: white;
	display: block;
}

ul li a:hover {
	background-color: #911515;
	z-index: 1000;
}
<!DOCTYPE html>
<html>
	<head>
		<title>Slasher Hub - Latest</title>
		<meta name="viewport" content="width:device-width; initial-scale:1;">
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	
	<body>
		<header id="header">
			<a href="index.html" id="title">Slasher Hub</a>
			<nav>
				<ul>
					<li style="margin-left: 40px;"><a>Home</a></li>
					<li><a>About Me</a></li>
					<li><a>Slasher Dev Team</a>
						<ul>
							<li><a>About Us</a></li>
							<li><a>Contact</a></li>
							<li><a>News</a></li>
							<li><a>Recent</a></li>
						</ul>
					</li>
					<li><a>Gallary</a></li>
				</ul>
			</nav>
		</header>
		<h3>Welcome to the Slasher Hub! This is the latest stuff going on with Slasher now!</h3>
	</body>
</html>

Ответы [ 2 ]

0 голосов
/ 28 августа 2018

В общем, все, что вам нужно было сделать, это добавить position: relative к элементу <nav> или <header>. 

/*Title*/

html,
body {
  margin: 0;
  padding: 0;
  font-family: Cursive, Sans-Serif;
}

#header {
  width: auto;
  height: 10px;
  padding: 1% 1% 1% 2%;
  background-color: #5e0d0d;
  box-shadow: 1px 1px 2px 2px #262626;
}

#header #title {
  font-family: "Open Sans", "Segoe UI";
  font-size: 150%;
  font-weight: lighter;
  color: #fff;
  text-decoration: none;
  float: left;
  margin-top: -.65%;
}


/*Navigation Bar*/

ul {
  font-family: Arial;
  margin: 0px;
  padding: 0px;
  list-style: none;
}

ul li {
  float: left;
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  margin-top: -.60%
}

ul li a {
  text-decoration: none;
  color: white;
  display: block;
}

ul li a:hover {
  background-color: #911515;
  z-index: 1000;
}

/* Here's the change */
header {
  position: relative;
}
<!DOCTYPE html>
<html>

<head>
  <title>Slasher Hub - Latest</title>
  <meta name="viewport" content="width:device-width; initial-scale:1;">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <header id="header">
    <a href="index.html" id="title">Slasher Hub</a>
    <nav>
      <ul>
        <li style="margin-left: 40px;"><a>Home</a></li>
        <li><a>About Me</a></li>
        <li><a>Slasher Dev Team</a>
          <ul>
            <li><a>About Us</a></li>
            <li><a>Contact</a></li>
            <li><a>News</a></li>
            <li><a>Recent</a></li>
          </ul>
        </li>
        <li><a>Gallary</a></li>
      </ul>
    </nav>
  </header>
  <h3>Welcome to the Slasher Hub! This is the latest stuff going on with Slasher now!</h3>
</body>

</html>

Я также немного изменил ваше меню <nav>, чтобы дать вам общее представление о настройке. 

/*Title*/

html,
body {
  margin: 0;
  padding: 0;
  font-family: Cursive, Sans-Serif;
}

#header {
  width: auto;
  /* height: 10px; Remove the height */
  display: inline-block; /* Set the display */
  padding: 1% 1% 1% 2%;
  background-color: #5e0d0d;
  box-shadow: 1px 1px 2px 2px #262626;
}

#header #title {
  font-family: "Open Sans", "Segoe UI";
  font-size: 150%;
  font-weight: lighter;
  color: #fff;
  text-decoration: none;
  float: left;
  margin-top: -.65%;
}


/*Navigation Bar*/

/* Make the position of the container relative to have it sit above the content */
nav {
  position: relative;
}

/* Add nav to each of the navigation bar selectors to be more specific */
nav ul {
  font-family: Arial;
  margin: 0px;
  padding: 0px;
  list-style: none;
}

nav ul li {
  float: left;
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
}

nav li a {
  text-decoration: none;
  color: white;
  display: block;
}

nav li:not(.top-level) a {
  background-color: #5e0d0d;
}
nav li:not(.top-level) a:hover {
  background-color: #911515
}

nav li.top-level > ul {
  display: none;
}

nav li.top-level:hover > ul {
  display: block;
}
<header id="header">
  <a href="index.html" id="title">Slasher Hub</a>
  <nav>
    <ul>
      <li class="top-level"><a href="#">Home</a></li>
      <li class="top-level"><a href="#">About Me</a></li>
      <li class="top-level"><a href="#">Slasher Dev Team</a>
        <ul>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">News</a></li>
          <li><a href="#">Recent</a></li>
        </ul>
      </li>
      <li class="top-level"><a href="#">Gallary</a></li>
    </ul>
  </nav>
</header>

<h3>Welcome to the Slasher Hub! This is the latest stuff going on with Slasher now!</h3>

Дайте мне знать, если у вас есть какие-либо вопросы.

0 голосов
/ 27 августа 2018

Чтобы заставить работать z-index, вы должны добавить position:absolute к элементу. 

ul li a:hover {
background-color: #911515;
z-index: 1000; 
position: absolute; }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...