代码之家  ›  专栏  ›  技术社区  ›  Simon Jensen

CSS菜单覆盖打开的其他内容

drop-down-menu css html
  •  1
  • Simon Jensen  · 技术社区  · 6 年前

    请参阅工作示例的代码片段!

    问题

    我真的说不出我错过了什么。我根本无法让菜单下拉列表放在下面的内容之上。在下面的片段中,它只是文本,但可以是任何内容。

    z-index 和 position: absolute; 没有成功。

    enter image description here 

    $(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>
    2 回复  |  直到 6 年前
        1
  •  1
  •   Rachel Gallen    6 年前

    是否要在文本上方显示下拉列表?如果是这样,也许这就是你想要的。。我在顶部添加了padding,并在div中添加了一个id,将内联 div 样式到css中。您可以将类或id添加到 p

    希望这有帮助! 

    $('#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>
        2
  •  0
  •   Irina    6 年前

    position: relative; { 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>
    推荐文章
    Jack Finan  ·  引导下拉菜单不可见
    6 年前
    Lakito  ·  如何在PHP上向日期(年份)下拉菜单添加单词?
    6 年前
    PvDev  ·  如何在html中显示下拉选择按钮?
    6 年前
    DaveSwans  ·  Matlab应用程序设计器。使用下拉菜单打开和关闭面板
    6 年前
    Mike Pinkman  ·  从下拉列表中获取文本并使用JQuery将其插入到输入文本中?
    6 年前
    Adriano Di Cara  ·  topnav裁剪的CSS下拉列表
    6 年前
    billy_56  ·  引导选择列表为空-角度
    6 年前
    Willy_Sunny  ·  Bootstrap4下拉菜单填充输入组
    6 年前
    user3580480  ·  在ASPX应用程序(VB)中添加条件下拉列表项
    6 年前
    T.BOBBEH  ·  隐藏具有多个下拉列表的列[已关闭]
    6 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号