Question

解决方案

请参见示例示例！

问题

我真的不能说我在这里想念的东西。我根本无法使菜单下拉菜单位于下面的内容之上。在下面的代码段中，它只是文本，但可以是任何内容。

在没有成功的情况下，我尝试应用z-index和position: absolute;。

我想通过垂直菜单实现下图所示的功能。它覆盖了一切。还是为此覆盖一个错误的单词？

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

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);
}

<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>

Answer 1

您是否要在文本上方显示下拉菜单？如果是这样，也许这就是您想要的。我在div的顶部添加了填充和id，将内联div样式转移到了CSS中。如果希望文本在每个段落中使用不同的颜色（并将color属性移出content div），则可以在p中添加类或id。建议避免使用内联样式。

希望这会有所帮助！

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

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;
}

<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>

Answer 2

带有文本的div必须具有position: relative;（意味着要附加）和.menu { position: absolute; }（意味着要附加什么）

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

.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: absolute;
  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);
}

html {
  height: 100%;
}

div .myText {
    position: relative;
}
body {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  margin: 0;
  padding: 0;
  background-color: #2E181A;
  height: 100%;
  width: 100%;
  color: #2F1919;
}

<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="myText" style="display: block; background: #FFF;">
  <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>

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

2 个答案: