HTML – 如何获得响应式汉堡菜单不要压低内容

概述我有这种响应式汉堡包导航,目前正在推动它下面的内容.有没有办法让它只是悬停在内容上而不是？我尝试了很多东西,没有任何我正在做的事,但我不是专家.任何帮助深表感谢！谢谢！ jsfiddle here <nav class="header"> <input class="menu-btn" type="checkbox" id="menu-btn" /> <label clas 我有这种响应式汉堡包导航,目前正在推动它下面的内容.有没有办法让它只是悬停在内容上而不是？我尝试了很多东西,没有任何我正在做的事,但我不是专家.任何帮助深表感谢！谢谢！

jsfiddle here

<nav >      <input  type="checkBox" ID="menu-btn" />      <label  for="menu-btn"><span ></span></label>      <ul >        <li><a href="#work">Our Work</a></li>        <li><a href="#about">About</a></li>        <li><a href="#careers">Careers</a></li>        <li><a href="#contact">Contact</a></li>      </ul>    </nav><figure ID="main-img"></figure>figure#main-img {    wIDth: 100%;    position: relative;    overflow: hIDden;    border-top: 1px solID #000000;    border-bottom: 1px solID #000000;    z-index: 10;  height: 200px;  background-color: red;}nav.header {    background-color: silver;  wIDth: 100%;  float: left;  overflow: hIDden;}.table {    display: table;       margin: 0 auto;}.header ul {    List-style: none;     position: relative;     float: left;     display: block;     left: 50%;    max-wIDth: 1200px;    margin: 0;    padding: 0;}.header ul li {    position: relative;     right: 50%;    /*float: left;     display: inline-block;*/ }.header li a {    display: block;    padding: 1em;    text-decoration: none;    color: #000000;}.header li a:hover {    background-color: #B5B5B5;}.header .menu {    clear: both;    max-height: 0;    Transition: max-height .2s ease-out;}.header .menu-icon {    cursor: pointer;    display: inline-block;    float: right;    padding: 28px 20px;    position: relative;    user-select: none;}.header .menu-icon .navicon {    background: #333;    display: block;    height: 2px;    position: relative;    Transition: background .2s ease-out;    wIDth: 18px;}.header .menu-icon .navicon:before,.header .menu-icon .navicon:after {    background: #333;    content: '';    display: block;    height: 100%;    position: absolute;    Transition: all .2s ease-out;    wIDth: 100%;}.header .menu-icon .navicon:before {    top: 5px;}.header .menu-icon .navicon:after {    top: -5px;}.header .menu-btn {    display: none;}.header .menu-btn:checked ~ .menu {    max-height: 240px;}.header .menu-btn:checked ~ .menu-icon .navicon {    background: transparent;}.header .menu-btn:checked ~ .menu-icon .navicon:before {    transform: rotate(-45deg);}.header .menu-btn:checked ~ .menu-icon .navicon:after {    transform: rotate(45deg);}.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {    top: 0;}@media only screen and (min-wIDth: 750px) {.header li {    float: left;}.header li a {    padding: 20px 30px;}.header .menu {    clear: none;    /*float: right;*/    max-height: none;}.header .menu-icon {    display: none;}}@media only screen and (max-wIDth: 750px) {.header li a {    background-color: Silver;    opacity: 0.9;}.header ul li {    border-bottom: 1px solID #000000;    color: #000;}.header ul li:first-child {    border-top: 0px solID #000000;}.header ul {    wIDth: 100%;}}@media only screen and (max-wIDth: 480px) {nav.header {}}

解决方法 代码(只有相关的CSS,HTML没有改变)来自 JSFiddle,以防它停止工作：

body {  wIDth:100%;  margin:0;}figure#main-img {    wIDth: 100%;    position: relative;    float:left;    overflow: hIDden;    border-top: 1px solID #000000;    border-bottom: 1px solID #000000;    height: 300px;    background-color: red;    margin:58px 0 0 0;}nav.header {  background-color: silver;  opacity: 0.75;  position: absolute;  wIDth: 100%;  top:0;  z-index:10;  float: left;  margin:0;  overflow:hidden;}.header .menu-icon {  padding: 28px 20px;}

这是你可以使用的JSFiddle.

nav.header {  background-color: silver;  position: absolute;  wIDth: 100%;  top:0;  z-index:10;  float: left;  margin:0;  overflow:hidden;}

在这里你可以看到我将位置设置为绝对位置,将其设置为顶部,然后z-index是一个比默认值更大的数字.

希望它有所帮助,安德鲁

总结

以上是内存溢出为你收集整理的HTML – 如何获得响应式汉堡菜单不要压低内容全部内容，希望文章能够帮你解决HTML – 如何获得响应式汉堡菜单不要压低内容所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。