CSS菜单在打开时覆盖其他内容

Question

解

在工作示例中查看代码段！

---

题

我真的不能说我在这里缺少什么。我根本无法将菜单下拉列表放在下面的内容之上。在下面的片段中，它只是文本，但它可以是任何东西。

我试图使用qazxsw poi和qazxsw poi但没有成功。

我想通过垂直菜单实现下图中可以看到的内容。它覆盖了一切。或者为此覆盖错误的单词？

z-index

position: absolute;

$(function(){
$('#menuanimation').click(function(e) {
    $(this).toggleClass('anime-menu').toggleClass('change');
});
});

Answer 1

您是否正在寻找显示在文本上方的下拉列表？如果是这样，也许这就是你想要的......我在顶部添加填充，并在div中添加id，将内联

html {
	height: 100%;
}

body {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	margin: 0;
	padding: 0;
	background-color: #E6D9BD;
	height: 100%;
	width: 100%;
	color: #2F1919;
}

.container {
	width: 100%;
	margin: 0px auto 10px auto;
	padding: 0px 0px 0px 0px;
	border: 5px solid #2E181A;
	background-color: #E6D9BD;
	position: relative;
	min-height: 100%;
	align-content: flex-start;
	display: flex;
	flex-flow: row wrap;
}

.container p {
	font-size: 4vw;
	margin: 0px 10px 10px 10px;
	padding: 5px;
	text-align:left;
	color: #2F1919;
	white-space: nowrap;
	white-space: pre-wrap;			/* CSS3 */	 
	white-space: -moz-pre-wrap; /* Firefox */		
	white-space: -pre-wrap;		 /* Opera <7 */	 
	white-space: -o-pre-wrap;	 /* Opera 7 */		
	word-wrap: break-word;			/* IE */
}

/*===== MENU below ======*/

.menu-checkbox {
  display: none;
}

.menu-checkbox ~ .menu {
  display: none;
}

.menu-checkbox:checked ~ .menu {
  display: block;
}

.menu-checkbox:checked ~ .menu ul {
  display: block;
}

.menu {
  display: none;
  float: right;
  position: absolute;
  border: 0px solid #2E181A;
	margin: 39px 0 0 0;
  padding: 0px;
  font-family: verdana, geneva, arial, helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #E6D9BD;
  /* #2E181A */
  width: 100%;
  background: none;
	z-index: 100;
  /* #E6D9BD */
}

.menu ul {
  background: #E6D9BD;
  display: none;
  margin: 0 10px 0 0;
  padding: 0;
  width: 200px;
  list-style: none;
	border: 5px solid #2E181A;
	border-top: none;
  float: right;
  position: relative;
		opacity:0.95;
	filter:alpha(opacity=95);/* For IE8 and earlier */
}

.menu li {
  padding: 0px 8px 0px 8px;
  display: inline-block;
  position: relative; /* */
}

.menu li a {
  color: #2E181A;
  display: block;
  font-weight: bold;
  padding: 8px 16px;
  text-decoration: none;
}

.menu ul li ul {
	border: 0;
}

.menu li ul ul {
  display: none;
	
}

.menu li ul li {
  display: none;
}

.anime-menu {
    display: inline-block;
    cursor: pointer;
    float: right;
    margin: 0 20px 0 0;
}

.anime-bar1, .anime-bar2, .anime-bar3 {
    width: 35px;
    height: 5px;
    background-color: #2E181A;
	border-radius: 3px;
    margin: 6px 0;
    transition: 0.4s;
}

.change {
    display: inline-block;
    cursor: pointer;
    float: right;
    margin: 0 20px 0 0;
}

.change .anime-bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.change .anime-bar2 {opacity: 0;}

.change .anime-bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}

样式转换为css。如果您希望文本在每个段落中使用不同的颜色（并将颜色属性移出内容div），则可以向

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="menu-checkbox" type="checkbox" id="menu-checkbox" />
<label for="menu-checkbox"><div class="anime-menu" id="menuanimation">
  <div class="anime-bar1"></div>
  <div class="anime-bar2"></div>
  <div class="anime-bar3"></div>
</div></label>
<div class="menu">
  <ul class="active">
    <li><a href="#">Frontpage</a></li>
    <li><a href="#">Sales</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Impressum</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Contact us</a></li>
  </ul>
</div>

<div class="container">
  <p>
    I modsætning til hvad mange tror, er Lorem Ipsum ikke bare tilfældig tekst. Det stammer fra et stykke litteratur på latin fra år 45 f.kr., hvilket gør teksten over 2000 år gammel. Richard McClintock, professor i latin fra Hampden-Sydney universitet i
    Virginia, undersøgte et af de mindst kendte ord "consectetur" fra en del af Lorem Ipsum, og fandt frem til dets oprindelse ved at studere brugen gennem klassisk litteratur. Lorem Ipsum stammer fra afsnittene 1.10.32 og 1.10.33 fra "de Finibus Bonorum
    et Malorum" (Det gode og ondes ekstremer), som er skrevet af Cicero i år 45 f.kr. Bogen, som var meget populær i renæssancen, er en afhandling om etik. Den første linie af Lorem Ipsum "Lorem ipsum dolor sit amet..." kommer fra en linje i afsnit 1.10.32.
    Standardafsnittet af Lorem Ipsum, som er brugt siden 1500-tallet, er gengivet nedenfor for de, der er interesserede. Afsnittene 1.10.32 og 1.10.33 fra "de Finibus Bonorum et Malorum" af Cicero er også gengivet i deres nøjagtige udgave i selskab med
    den engelske udgave fra oversættelsen af H. Rackham fra 1914. Standardafsnittet af Lorem Ipsum, som er brugt siden 1500-tallet, er gengivet nedenfor for de, der er interesserede. Afsnittene 1.10.32 og 1.10.33 fra "de Finibus Bonorum et Malorum" af
    Cicero er også gengivet i deres nøjagtige udgave i selskab med den engelske udgave fra oversættelsen af H. Rackham fra 1914.
  </p>
</div>

添加类或ID。建议避免内联风格..

希望这可以帮助！

div

p

$('#menuanimation').click(function(e) {
  $(this).toggleClass('anime-menu').toggleClass('change');
});

Answer 2

带文字的div必须有

html {
  height: 100%;
}

body {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  margin: 0;
  padding: 0;
  background-color: #2E181A;
  height: 100%;
  width: 100%;
  color: #2F1919;
}

.menu-checkbox {
  display: none;
}

.menu-checkbox~.animemenu:before {
  content: "";
}

.menu-checkbox~.menu {
  display: none;
}

.menu-checkbox:checked~.menu {
  display: block;
}

.menu {
  overflow: hidden;
  display: none;
  float: right;
  position: relative;
  z-index: 1;
  border: 0px solid #2E181A;
  padding: 0px;
  font-family: verdana, geneva, arial, helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #2E181A;
  /* #2E181A */
  width: 100%;
  background: #2E181A;
  /* #E6D9BD */
}

.menu ul {
  background: #E6D9BD;
  display: hidden;
  margin: 0;
  padding: 0;
  width: 200px;
  list-style: none;
  float: right;
  overflow: hidden;
}

.menu li {
  padding: 0px 8px 0px 8px;
  display: inline-block;
  position: relative;
}

.menu li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

.menu li ul ul {
  display: none;
}

.menu li ul li {
  display: none;
}


/* Change the link color on hover */

.menu li a:hover {
  background-color: #555;
  color: white;
  width: 100%;
}

.anime-menu {
  display: inline-block;
  cursor: pointer;
  float: right;
  margin: 0 20px 0 0;
}

.anime-bar1,
.anime-bar2,
.anime-bar3 {
  width: 35px;
  height: 5px;
  background-color: #E6D9BD;
  margin: 6px 0;
  transition: 0.4s;
}

.change {
  display: inline-block;
  cursor: pointer;
  float: right;
  margin: 0 20px 0 0;
}

.change .anime-bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .anime-bar2 {
  opacity: 0;
}

.change .anime-bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}




#content p {
  padding-top: 65px;
  background-color:#ffffff;
}

#content p::after {
  position: relative;
  display: block;
  /*background-color: #FFF;*/
  color: blue;
}

（表示附加到）和.menu

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="menu-checkbox" type="checkbox" id="menu-checkbox" />
<label for="menu-checkbox"><div class="anime-menu" id="menuanimation">
  <div class="anime-bar1"></div>
  <div class="anime-bar2"></div>
  <div class="anime-bar3"></div>
</div></label>
<div class="menu">
  <ul class="active">
    <li><a href="#">Frontpage</a></li>
    <li><a href="#">Sales</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Impressum</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Contact us</a></li>
  </ul>
</div>

<div id="content">
  <p style="color: blue">
    I modsætning til hvad mange tror, er Lorem Ipsum ikke bare tilfældig tekst. Det stammer fra et stykke litteratur på latin fra år 45 f.kr., hvilket gør teksten over 2000 år gammel. Richard McClintock, professor i latin fra Hampden-Sydney universitet i
    Virginia, undersøgte et af de mindst kendte ord "consectetur" fra en del af Lorem Ipsum, og fandt frem til dets oprindelse ved at studere brugen gennem klassisk litteratur. Lorem Ipsum stammer fra afsnittene 1.10.32 og 1.10.33 fra "de Finibus Bonorum
    et Malorum" (Det gode og ondes ekstremer), som er skrevet af Cicero i år 45 f.kr. Bogen, som var meget populær i renæssancen, er en afhandling om etik. Den første linie af Lorem Ipsum "Lorem ipsum dolor sit amet..." kommer fra en linje i afsnit 1.10.32.
    Standardafsnittet af Lorem Ipsum, som er brugt siden 1500-tallet, er gengivet nedenfor for de, der er interesserede. Afsnittene 1.10.32 og 1.10.33 fra "de Finibus Bonorum et Malorum" af Cicero er også gengivet i deres nøjagtige udgave i selskab med
    den engelske udgave fra oversættelsen af H. Rackham fra 1914. Standardafsnittet af Lorem Ipsum, som er brugt siden 1500-tallet, er gengivet nedenfor for de, der er interesserede. Afsnittene 1.10.32 og 1.10.33 fra "de Finibus Bonorum et Malorum" af
    Cicero er også gengivet i deres nøjagtige udgave i selskab med den engelske udgave fra oversættelsen af H. Rackham fra 1914.
  </p>
</div>

（表示要附加的内容）

position: relative;

{ position: absolute; }

$('#menuanimation').click(function(e) {
  $(this).toggleClass('anime-menu').toggleClass('change');
});