我想在我的计划中寻求帮助。我的菜单栏工作不久前，有人在这里帮助我解决了我的内容文件中的链接中的问题。
我从style2.css中删除的代码是z-index：1;来自#content css。这样做使内容div内的链接工作。但是，删除那行代码会对我的代码产生影响。
这里是发生了什么的链接，并注意到我们的产品下拉和建议不起作用。我确定它是在css文件中的某个地方，但我发现很难搜索到哪里。
http://jsfiddle.net/misaki03/9nw3zg4p/
这是html文件
<body>
<div id="container"> <!--wrapper-->
<header id="header">
<div id="menu" class="menu"> <!--navMenu-->
<ul>
<li><a href="#" > HOME </a></li>
<li>OUR PRODUCT
<ul>
<li><a href="#" > PRODUCT OVERVIEW</a></li>
<li><a href="#" > USAGE</a></li>
<li><a href="#" > PRODUCT REVIEWS </a></li>
</ul>
</li>
<li> SUGGESTIONS
<ul>
<li><a href="#" > TIPS and IDEAS </a></li>
<li><a href="#" > RECIPES </a></li>
<li><a href="#" > SEND US YOUR IDEAS </a></li>
</ul>
</li>
<li><a href="#" > ABOUT US </a> </li>
<li><a href="#" > CONTACT US </a> </li>
</ul>
<br class="clearFloat" />
</div>
</header>
<section id="content">
<div class="reviews" id="reviews">
<center>
<table style="width:700px;">
<tr>
<th colspan="2" id="overview"> <h2> - PRODUCT REVIEW - </h2> <br /> <h5>Our customers love us </h5> </th>
</tr>
<tr>
<td rowspan="2" > <img src="images/reviewID.jpg" /> </td>
<td> <h3> Big Al 5000 </h3></td>
</tr>
<tr>
<td> <p>There are some friends of mine who have a catering business that deals with private events, and they have had to make hemp/marijuana-based foods for their clients. They used cheesecloth for certain things like butter making, tea and even separating the plant from seeds. Let's just say it definitely works well for those purposes. I am not saying you should condone it, but it is an emerging culinary trade. The more it becomes legal, the more you will see this in even fine dining restaurants.</p></td>
</tr>
<tr>
<td rowspan="2"> <img src="images/reviewID.jpg" /> </td>
<td> <h3> Ari </h3></td>
</tr>
<tr>
<td> <p>I love cheese, but it is getting quite expensive these days. I have found myself doing a lot more DIY projects, and now I can say I have successfully made my own cheese. Sharp cheddar to be exact. It may not have been the absolute best cheese I ever had, but it was very, very good cheese. Definitely going to be making more now that I see how fulfilling it is. Might actually get even better at it. Wish me luck!</p></td>
</tr>
<tr>
<td rowspan="2"> <img src="images/reviewID.jpg" /> </td>
<td> <h3> Miles </h3></td>
</tr>
<tr>
<td> <p>TI saw something on Pinterest that showed babies in what looked like swaddling cloths. I had to look into it a bit, and I saw that it was actually cheesecloth that was being used. They are the cutest baby photos ever! I looked around online to see if there was any specific kind I had to get, and then I noticed that this one mentioned it was good for use in photography. I like it when my decisions are made for me (ha ha). I have now used this cloth for other things also. I just cut a piece off here and there and get a wash rag or dust rag or whatever. It is pretty good for just about anything you would use a rag for.</p></td>
</tr>
<tr>
<td rowspan="2"> <img src="images/reviewID.jpg" /> </td>
<td> <h3> Neil T </h3></td>
</tr>
<tr>
<td> <p>I used it as halloween decorations then I used it for my turkey on Thanksgiving. I also used it as a seed stopper for my lemons as I saw once in a restaurant. Made calamari for a dinner and didn't get seeds in it. This is a good quality cloth. I am going to test it out on my Christmas ham, because I have plenty left over.</p></td>
</tr>
</table>
</center>
</div>
</section>
<footer id="footer">
<div id="fmenu" class="fmenu">
<p>©2015 copyright | Perfect Holiday All Rights Reserved</p>
<ul class="social_icons">
<li class="social">
<a href="http://www.facebook.com/ourperfectholiday" target="_blank">
<img src="images/fb.png" /> </a></li>
<li class="social">
<a href="https://www.pinterest.com/OPerfectHoliday/" target="_blank">
<img src="images/pin.png" /> </a></li>
<li class="social">
<a href="https://instagram.com/perfectholiday.cheesecloth/" target="_blank">
<img src="images/insta.png" /> </a></li>
</ul>
</footer>
</div>
</div>
</body>
和css文件
.fmenu, .push{
height: 4em;
clear:both;
}
/*ends here */
body {
background: url(images/cheeseclothBG.jpg)no-repeat center center fixed;
font-family: Avenir !important;
font-size: 12pt;
line-height: 20px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#header {
background: url(images/header.jpg) no-repeat;
min-height: 270px;
overflow: hidden;
background-size: 100%;
}
#content {
float: left;
width: 100%;
margin-top: -101px;
background: #fff;
position:relative;
}
#img {
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
#img img{
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
#desc{
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
#container {
width: 826px;
margin: 0 auto;
box-shadow: 0 0 5px 1px #ccc;
}
#menu{
margin:0;
padding:0;
}
#menu ul{
margin:0;
padding:0;
line-height:30px;
margin-left:35px;
margin-top: 139px;
}
#menu li{
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#fff;
}
#menu ul li a{
text-align:center;
font-family:"Comic Sans MS", cursive;
font-size:12px;
text-decoration:none;
height:30px;
width:150px;
display:block;
color:#000;
margin-left:10px;
text-shadow:1px 1px 1px #999;
}
#menu ul li{
text-align:center;
font-family:"Comic Sans MS", cursive;
font-size:12px;
text-decoration:none;
height:30px;
width:150px;
display:block;
color:#000;
text-shadow:1px 1px 1px #999;
}
#menu ul li ul li a{
text-align:center;
margin-left:0px;
}
#menu ul li ul{
margin-top:-5px;
}
#menu ul li ul li{
margin-top:-2px;
margin-left:-35px;
position:relative;
z-index:3px;
}
#menu ul ul{
position:absolute;
visibility:hidden;
top:32px;
z-index:10px;
}
#menu ul li:hover ul{
visibility:visible;
}
/*******************************/
#menu li:hover{
text-decoration:underline;
}
#menu ul li:hover ul li a:hover{
text-decoration:underline;
color:#fa9a2a;
}
#menu a:hover{
color:#fa9a2a;
}
#menu ul li:hover {
color:#fa9a2a;
}
.clearFloat{
clear:both;
margin:0;
padding:0;
}
#content p {
margin: 30px 30px;
}
#footer {
background: url(images/footer.jpg);
min-height: 146px;
background-size: 100%;
clear: both;
}
#fmenu ul {
padding: 0;
margin-top: 120px;
padding-top: 19px;
}
#fmenu ul li {
display: inline-block;
}
#fmenu ul li a {
font-size: 14px;
font-weight: bold;
padding: 1px 14px 0;
margin-top: 0px;
color: #000000;
}
#fmenu p {
/**margin-top: 120px;
margin-left: 480px;
display: inline-block;
width: 310px;
font-size: 11px;
color: #000;
text-align: right;**/
width:70%;
color:#FFFFFF;
font-size: 8pt;
padding-left:10px;
padding-top:10px;
display:inline-flex;
margin-top: 110px;
}
#fmenu img{
width:36px;
height:36px;
}
#fmenu ul.social_icons, li.social {
margin-top:40px;
padding-left:5px;
padding-right:5px;
max-width:25%;
list-style: none;
float:right;
text-decoration:none;
display:inline-block;
position: relative;
}
#mainTxt p{
margin: 40px 100px;
}
#overview h2{
font-family: Open Sans Condensed, !important;
text-shadow: 2px 2px 8px #9d9b9b;
font-size: 26px;
}
#overview h1{
font-family: Impact, !important;
font-size: 46px;
}
#overview h4{
font-family: Gabriola, !important;
font-size: 26px;
color: #e2705a;
margin-top: -20px;
}
#overview h3{
font-family: Sacramento, !important;
font-size: 36px;
margin-top: -20px;
}
#overview h5{
font-family: Open Sans Condensed, !important;
font-size: 21px;
margin-top: -20px;
}
#reviews table th td{
border: 1px solid black;
}
#reviews h5{
font-family: Open Sans Condensed, !important;
font-size: 18px;
text-align:center;
}
#reviews h2{
font-family: Open Sans Condensed, !important;
text-shadow: 2px 2px 8px #9d9b9b;
font-size: 26px;
}
#reviews h3{
font-family: Sacramento, !important;
font-size: 26px;
font-weight:bold;
}
#usage h1{
font-family: Cookie, !important;
font-size: 46px;
float:left;
}
#usage img{
width: 250px;
height: 250px;
}
#about p{
font-family: Georgia, !important;
font-size: 18px;
font-style: italic;
text-align: justify;
}
#about2 p{
font-family: Avenir, !important;
font-size: 16px;
width:600px;
}
#about2 ul{
width:600px;
}
#about2 li{
font-family: Avenir, !important;
font-size: 14px;
width:600px;
text-align: left;
}
#recipe h2{
font-family: Open Sans Condensed, !important;
text-shadow: 2px 2px 8px #9d9b9b;
font-size: 26px;
}
#recipe h1{
font-family: Gabriola, !important;
font-size: 32px;
color: #e2705a;
}
#recipe h4{
font-family: Open Sans Condensed, !important;
font-size: 16px;
margin-top: -20px;
}
#recipe h5{
font-family: Open Sans Condensed, !important;
font-size: 16px;
margin-top: -20px;
color: red;
}
#recipe p{
margin-top: -20px;
}
#tips h2{
font-family: Open Sans Condensed, !important;
text-shadow: 2px 2px 8px #9d9b9b;
font-size: 26px;
}
#tips h1{
font-family: Gabriola, !important;
font-size: 32px;
color: #e2705a;
}
#tips h4{
font-family: Open Sans Condensed, !important;
font-size: 16px;
margin-top: -20px;
}
#tips h5{
font-family: Open Sans Condensed, !important;
font-size: 16px;
margin-top: -20px;
color: red;
}
#tips p{
margin-top: -20px;
}
#tips h6{
font-family: Open Sans Condensed, !important;
font-size: 16px;
margin-top: -5px;
}
提前感谢您的帮助。
答案 0 :(得分：2)
#menu ul ul {
position:absolute;
visibility:hidden;
top:32px;
z-index:10; /* you gave it px unit*/
}
#menu ul li:hover ul {
display: block; /* you given display none, but didn't gave block on li hover*/
visibility:visible;
}
/**
/* sticky footer codes */
.fmenu,
.push {
height: 4em;
clear: both;
}
/*ends here */
body {
background: url(images/cheeseclothBG.jpg)no-repeat center center fixed;
font-family: Avenir !important;
font-size: 12pt;
line-height: 20px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#header {
background: url(images/header.jpg) no-repeat;
min-height: 270px;
overflow: hidden;
background-size: 100%;
}
#content {
float: left;
width: 100%;
margin-top: -101px;
background: #fff;
position: relative;
}
#img {
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
#img img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
#desc {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
#container {
width: 826px;
margin: 0 auto;
box-shadow: 0 0 5px 1px #ccc;
}
#menu {
margin: 0;
padding: 0;
}
#menu ul {
margin: 0;
padding: 0;
line-height: 30px;
margin-left: 35px;
margin-top: 139px;
}
#menu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
background: #fff;
}
#menu ul li a {
text-align: center;
font-family: "Comic Sans MS", cursive;
font-size: 12px;
text-decoration: none;
height: 30px;
width: 150px;
display: block;
color: #000;
margin-left: 10px;
text-shadow: 1px 1px 1px #999;
}
#menu ul li {
text-align: center;
font-family: "Comic Sans MS", cursive;
font-size: 12px;
text-decoration: none;
height: 30px;
width: 150px;
display: block;
color: #000;
text-shadow: 1px 1px 1px #999;
}
#menu ul li ul li a {
text-align: center;
margin-left: 0px;
}
#menu ul li ul {
margin-top: -5px;
display: none;
}
#menu ul li ul li {
margin-top: -2px;
margin-left: -35px;
position: relative;
z-index: 3px;
}
#menu ul ul {
position: absolute;
visibility: hidden;
top: 32px;
z-index: 10;
}
#menu ul li:hover ul {
display: block;
visibility: visible;
}
/*******************************/
#menu li:hover {
text-decoration: underline;
}
#menu ul li:hover ul li a:hover {
text-decoration: underline;
color: #fa9a2a;
}
#menu a:hover {
color: #fa9a2a;
}
#menu ul li:hover {
color: #fa9a2a;
}
.clearFloat {
clear: both;
margin: 0;
padding: 0;
}
#content p {
margin: 30px 30px;
}
#footer {
background: url(images/footer.jpg);
min-height: 146px;
background-size: 100%;
clear: both;
}
#fmenu ul {
padding: 0;
margin-top: 120px;
padding-top: 19px;
}
#fmenu ul li {
display: inline-block;
}
#fmenu ul li a {
font-size: 14px;
font-weight: bold;
padding: 1px 14px 0;
margin-top: 0px;
color: #000000;
}
#fmenu p {
/**margin-top: 120px;
margin-left: 480px;
display: inline-block;
width: 310px;
font-size: 11px;
color: #000;
text-align: right;**/
width: 70%;
color: #FFFFFF;
font-size: 8pt;
padding-left: 10px;
padding-top: 10px;
display: inline-flex;
margin-top: 110px;
}
#fmenu img {
width: 36px;
height: 36px;
}
#fmenu ul.social_icons,
li.social {
margin-top: 40px;
padding-left: 5px;
padding-right: 5px;
max-width: 25%;
list-style: none;
float: right;
text-decoration: none;
display: inline-block;
position: relative;
}
#mainTxt p {
margin: 40px 100px;
}
#overview h2 {
font-family: 'Open Sans Condensed' !important;
text-shadow: 2px 2px 8px #9d9b9b;
font-size: 26px;
}
#overview h1 {
font-family: Impact, !important;
font-size: 46px;
}
#overview h4 {
font-family: Gabriola, !important;
font-size: 26px;
color: #e2705a;
margin-top: -20px;
}
#overview h3 {
font-family: Sacramento, !important;
font-size: 36px;
margin-top: -20px;
}
#overview h5 {
font-family: 'Open Sans Condensed' !important;
font-size: 21px;
margin-top: -20px;
}
#reviews table th td {
border: 1px solid black;
}
#reviews h5 {
font-family: 'Open Sans Condensed' !important;
font-size: 18px;
text-align: center;
}
#reviews h2 {
font-family: 'Open Sans Condensed' !important;
text-shadow: 2px 2px 8px #9d9b9b;
font-size: 26px;
}
#reviews h3 {
font-family: Sacramento, !important;
font-size: 26px;
font-weight: bold;
}
#usage h1 {
font-family: Cookie, !important;
font-size: 46px;
float: left;
}
#usage img {
width: 250px;
height: 250px;
}
#about p {
font-family: Georgia, !important;
font-size: 18px;
font-style: italic;
text-align: justify;
}
#about2 p {
font-family: Avenir, !important;
font-size: 16px;
width: 600px;
}
#about2 ul {
width: 600px;
}
#about2 li {
font-family: Avenir, !important;
font-size: 14px;
width: 600px;
text-align: left;
}
#recipe h2 {
font-family: 'Open Sans Condensed' !important;
text-shadow: 2px 2px 8px #9d9b9b;
font-size: 26px;
}
#recipe h1 {
font-family: Gabriola, !important;
font-size: 32px;
color: #e2705a;
}
#recipe h4 {
font-family: 'Open Sans Condensed' !important;
font-size: 16px;
margin-top: -20px;
}
#recipe h5 {
font-family: 'Open Sans Condensed' !important;
font-size: 16px;
margin-top: -20px;
color: red;
}
#recipe p {
margin-top: -20px;
}
#tips h2 {
font-family: 'Open Sans Condensed' !important;
text-shadow: 2px 2px 8px #9d9b9b;
font-size: 26px;
}
#tips h1 {
font-family: Gabriola, !important;
font-size: 32px;
color: #e2705a;
}
#tips h4 {
font-family: 'Open Sans Condensed' !important;
font-size: 16px;
margin-top: -20px;
}
#tips h5 {
font-family: 'Open Sans Condensed' !important;
font-size: 16px;
margin-top: -20px;
color: red;
}
#tips p {
margin-top: -20px;
}
#tips h6 {
font-family: 'Open Sans Condensed' !important;
font-size: 16px;
margin-top: -5px;
}<div id="container">
<!--wrapper-->
<header id="header">
<div id="menu" class="menu">
<!--navMenu-->
<ul class="ddmenu">
<li><a href="#"> HOME </a>
</li>
<li><a href="#">OUR PRODUCT</a>
<ul>
<li><a href="#"> PRODUCT OVERVIEW</a>
</li>
<li><a href="#"> USAGE</a>
</li>
<li><a href="#"> PRODUCT REVIEWS </a>
</li>
</ul>
</li>
<li><a href="#">SUGGESTIONS</a>
<ul>
<li><a href="#"> TIPS and IDEAS </a>
</li>
<li><a href="#"> RECIPES </a>
</li>
<li><a href="#"> SEND US YOUR IDEAS </a>
</li>
</ul>
</li>
<li><a href="#"> ABOUT US </a>
</li>
<li><a href="#"> CONTACT US </a>
</li>
</ul>
<br class="clearFloat" />
</div>
</header>
<section id="content">
<div class="reviews" id="reviews">
<center>
<table style="width:700px;">
<tr>
<th colspan="2" id="overview">
<h2> - PRODUCT REVIEW - </h2>
<br />
<h5>Our customers love us </h5>
</th>
</tr>
<tr>
<td rowspan="2">
<img src="images/reviewID.jpg" />
</td>
<td>
<h3> Big Al 5000 </h3>
</td>
</tr>
<tr>
<td>
<p>There are some friends of mine who have a catering business that deals with private events, and they have had to make hemp/marijuana-based foods for their clients. They used cheesecloth for certain things like butter making, tea and even
separating the plant from seeds. Let's just say it definitely works well for those purposes. I am not saying you should condone it, but it is an emerging culinary trade. The more it becomes legal, the more you will see this in even fine
dining restaurants.</p>
</td>
</tr>
<tr>
<td rowspan="2">
<img src="images/reviewID.jpg" />
</td>
<td>
<h3> Ari </h3>
</td>
</tr>
<tr>
<td>
<p>I love cheese, but it is getting quite expensive these days. I have found myself doing a lot more DIY projects, and now I can say I have successfully made my own cheese. Sharp cheddar to be exact. It may not have been the absolute best cheese
I ever had, but it was very, very good cheese. Definitely going to be making more now that I see how fulfilling it is. Might actually get even better at it. Wish me luck!</p>
</td>
</tr>
<tr>
<td rowspan="2">
<img src="images/reviewID.jpg" />
</td>
<td>
<h3> Miles </h3>
</td>
</tr>
<tr>
<td>
<p>TI saw something on Pinterest that showed babies in what looked like swaddling cloths. I had to look into it a bit, and I saw that it was actually cheesecloth that was being used. They are the cutest baby photos ever! I looked around online
to see if there was any specific kind I had to get, and then I noticed that this one mentioned it was good for use in photography. I like it when my decisions are made for me (ha ha). I have now used this cloth for other things also. I
just cut a piece off here and there and get a wash rag or dust rag or whatever. It is pretty good for just about anything you would use a rag for.</p>
</td>
</tr>
<tr>
<td rowspan="2">
<img src="images/reviewID.jpg" />
</td>
<td>
<h3> Neil T </h3>
</td>
</tr>
<tr>
<td>
<p>I used it as halloween decorations then I used it for my turkey on Thanksgiving. I also used it as a seed stopper for my lemons as I saw once in a restaurant. Made calamari for a dinner and didn't get seeds in it. This is a good quality
cloth. I am going to test it out on my Christmas ham, because I have plenty left over.</p>
</td>
</tr>
</table>
</center>
</div>
</section>
<footer id="footer">
<div id="fmenu" class="fmenu">
<p>©2015 copyright | Perfect Holiday All Rights Reserved</p>
<ul class="social_icons">
<li class="social">
<a href="http://www.facebook.com/ourperfectholiday" target="_blank">
<img src="images/fb.png" />
</a>
</li>
<li class="social">
<a href="https://www.pinterest.com/OPerfectHoliday/" target="_blank">
<img src="images/pin.png" />
</a>
</li>
<li class="social">
<a href="https://instagram.com/perfectholiday.cheesecloth/" target="_blank">
<img src="images/insta.png" />
</a>
</li>
</ul>
</footer>
</div>
</div>
答案 1 :(得分：1)
现在它可以使用下面的代码，但是在这个代码结构方面还有很多改进的余地，而且还有css
我使用z-index显示隐藏下拉列表而不是可见性属性。
更正的z-index声明z-index不能以像素为单位声明，只需简单地编写为：z-index：1;
/* sticky footer codes */
.fmenu,
.push {
height: 4em;
clear: both;
}
/*ends here */
body {
background: url(images/cheeseclothBG.jpg)no-repeat center center fixed;
font-family: Avenir !important;
font-size: 12pt;
line-height: 20px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#header {
background: url(images/header.jpg) no-repeat;
min-height: 270px;
overflow: hidden;
background-size: 100%;
}
#content {
float: left;
width: 100%;
margin-top: -101px;
background: #fff;
position: relative;
}
#img {
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
#img img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
#desc {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
#container {
width: 826px;
margin: 0 auto;
box-shadow: 0 0 5px 1px #ccc;
}
#menu {
margin: 0;
padding: 0;
}
#menu ul {
margin: 0;
padding: 0;
line-height: 30px;
margin-left: 35px;
margin-top: 139px;
}
#menu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
background: #fff;
}
#menu ul li a {
text-align: center;
font-family: "Comic Sans MS", cursive;
font-size: 12px;
text-decoration: none;
height: 30px;
width: 150px;
display: block;
color: #000;
margin-left: 10px;
text-shadow: 1px 1px 1px #999;
}
#menu ul li {
text-align: center;
font-family: "Comic Sans MS", cursive;
font-size: 12px;
text-decoration: none;
height: 30px;
width: 150px;
display: block;
color: #000;
text-shadow: 1px 1px 1px #999;
}
#menu ul li ul li a {
text-align: center;
margin-left: 0px;
}
#menu ul li ul {
margin-top: -5px;
}
#menu ul li ul li {
margin-top: -2px;
margin-left: -35px;
position: relative;
}
#menu ul ul {
position: absolute;
top: 32px;
}
#menu ul li:hover ul {
z-index: 1;
}
/*******************************/
#menu li:hover {
text-decoration: underline;
}
#menu ul li:hover ul li a:hover {
text-decoration: underline;
color: #fa9a2a;
}
#menu a:hover {
color: #fa9a2a;
}
#menu ul li:hover {
color: #fa9a2a;
}
.clearFloat {
clear: both;
margin: 0;
padding: 0;
}
#content p {
margin: 30px 30px;
}
#footer {
background: url(images/footer.jpg);
min-height: 146px;
background-size: 100%;
clear: both;
}
#fmenu ul {
padding: 0;
margin-top: 120px;
padding-top: 19px;
}
#fmenu ul li {
display: inline-block;
}
#fmenu ul li a {
font-size: 14px;
font-weight: bold;
padding: 1px 14px 0;
margin-top: 0px;
color: #000000;
}
#fmenu p {
/**margin-top: 120px;
margin-left: 480px;
display: inline-block;
width: 310px;
font-size: 11px;
color: #000;
text-align: right;**/
width: 70%;
color: #FFFFFF;
font-size: 8pt;
padding-left: 10px;
padding-top: 10px;
display: inline-flex;
margin-top: 110px;
}
#fmenu img {
width: 36px;
height: 36px;
}
#fmenu ul.social_icons,
li.social {
margin-top: 40px;
padding-left: 5px;
padding-right: 5px;
max-width: 25%;
list-style: none;
float: right;
text-decoration: none;
display: inline-block;
position: relative;
}
#mainTxt p {
margin: 40px 100px;
}
#overview h2 {
font-family: Open Sans Condensed, !important;
text-shadow: 2px 2px 8px #9d9b9b;
font-size: 26px;
}
#overview h1 {
font-family: Impact, !important;
font-size: 46px;
}
#overview h4 {
font-family: Gabriola, !important;
font-size: 26px;
color: #e2705a;
margin-top: -20px;
}
#overview h3 {
font-family: Sacramento, !important;
font-size: 36px;
margin-top: -20px;
}
#overview h5 {
font-family: Open Sans Condensed, !important;
font-size: 21px;
margin-top: -20px;
}
#reviews table th td {
border: 1px solid black;
}
#reviews h5 {
font-family: Open Sans Condensed, !important;
font-size: 18px;
text-align: center;
}
#reviews h2 {
font-family: Open Sans Condensed, !important;
text-shadow: 2px 2px 8px #9d9b9b;
font-size: 26px;
}
#reviews h3 {
font-family: Sacramento, !important;
font-size: 26px;
font-weight: bold;
}
#usage h1 {
font-family: Cookie, !important;
font-size: 46px;
float: left;
}
#usage img {
width: 250px;
height: 250px;
}
#about p {
font-family: Georgia, !important;
font-size: 18px;
font-style: italic;
text-align: justify;
}
#about2 p {
font-family: Avenir, !important;
font-size: 16px;
width: 600px;
}
#about2 ul {
width: 600px;
}
#about2 li {
font-family: Avenir, !important;
font-size: 14px;
width: 600px;
text-align: left;
}
#recipe h2 {
font-family: Open Sans Condensed, !important;
text-shadow: 2px 2px 8px #9d9b9b;
font-size: 26px;
}
#recipe h1 {
font-family: Gabriola, !important;
font-size: 32px;
color: #e2705a;
}
#recipe h4 {
font-family: Open Sans Condensed, !important;
font-size: 16px;
margin-top: -20px;
}
#recipe h5 {
font-family: Open Sans Condensed, !important;
font-size: 16px;
margin-top: -20px;
color: red;
}
#recipe p {
margin-top: -20px;
}
#tips h2 {
font-family: Open Sans Condensed, !important;
text-shadow: 2px 2px 8px #9d9b9b;
font-size: 26px;
}
#tips h1 {
font-family: Gabriola, !important;
font-size: 32px;
color: #e2705a;
}
#tips h4 {
font-family: Open Sans Condensed, !important;
font-size: 16px;
margin-top: -20px;
}
#tips h5 {
font-family: Open Sans Condensed, !important;
font-size: 16px;
margin-top: -20px;
color: red;
}
#tips p {
margin-top: -20px;
}
#tips h6 {
font-family: Open Sans Condensed, !important;
font-size: 16px;
margin-top: -5px;
}<body>
<div id="container">
<!--wrapper-->
<header id="header">
<div id="menu" class="menu">
<!--navMenu-->
<ul>
<li><a href="#"> HOME </a>
</li>
<li>OUR PRODUCT
<ul>
<li><a href="#"> PRODUCT OVERVIEW</a>
</li>
<li><a href="#"> USAGE</a>
</li>
<li><a href="#"> PRODUCT REVIEWS </a>
</li>
</ul>
</li>
<li>SUGGESTIONS
<ul>
<li><a href="#"> TIPS and IDEAS </a>
</li>
<li><a href="#"> RECIPES </a>
</li>
<li><a href="#"> SEND US YOUR IDEAS </a>
</li>
</ul>
</li>
<li><a href="#"> ABOUT US </a>
</li>
<li><a href="#"> CONTACT US </a>
</li>
</ul>
<br class="clearFloat" />
</div>
</header>
<section id="content">
<div class="reviews" id="reviews">
<center>
<table style="width:700px;">
<tr>
<th colspan="2" id="overview">
<h2> - PRODUCT REVIEW - </h2>
<br />
<h5>Our customers love us </h5>
</th>
</tr>
<tr>
<td rowspan="2">
<img src="images/reviewID.jpg" />
</td>
<td>
<h3> Big Al 5000 </h3>
</td>
</tr>
<tr>
<td>
<p>There are some friends of mine who have a catering business that deals with private events, and they have had to make hemp/marijuana-based foods for their clients. They used cheesecloth for certain things like butter making, tea and even
separating the plant from seeds. Let's just say it definitely works well for those purposes. I am not saying you should condone it, but it is an emerging culinary trade. The more it becomes legal, the more you will see this in even fine
dining restaurants.</p>
</td>
</tr>
<tr>
<td rowspan="2">
<img src="images/reviewID.jpg" />
</td>
<td>
<h3> Ari </h3>
</td>
</tr>
<tr>
<td>
<p>I love cheese, but it is getting quite expensive these days. I have found myself doing a lot more DIY projects, and now I can say I have successfully made my own cheese. Sharp cheddar to be exact. It may not have been the absolute best
cheese I ever had, but it was very, very good cheese. Definitely going to be making more now that I see how fulfilling it is. Might actually get even better at it. Wish me luck!</p>
</td>
</tr>
<tr>
<td rowspan="2">
<img src="images/reviewID.jpg" />
</td>
<td>
<h3> Miles </h3>
</td>
</tr>
<tr>
<td>
<p>TI saw something on Pinterest that showed babies in what looked like swaddling cloths. I had to look into it a bit, and I saw that it was actually cheesecloth that was being used. They are the cutest baby photos ever! I looked around online
to see if there was any specific kind I had to get, and then I noticed that this one mentioned it was good for use in photography. I like it when my decisions are made for me (ha ha). I have now used this cloth for other things also.
I just cut a piece off here and there and get a wash rag or dust rag or whatever. It is pretty good for just about anything you would use a rag for.</p>
</td>
</tr>
<tr>
<td rowspan="2">
<img src="images/reviewID.jpg" />
</td>
<td>
<h3> Neil T </h3>
</td>
</tr>
<tr>
<td>
<p>I used it as halloween decorations then I used it for my turkey on Thanksgiving. I also used it as a seed stopper for my lemons as I saw once in a restaurant. Made calamari for a dinner and didn't get seeds in it. This is a good quality
cloth. I am going to test it out on my Christmas ham, because I have plenty left over.</p>
</td>
</tr>
</table>
</center>
</div>
</section>
<footer id="footer">
<div id="fmenu" class="fmenu">
<p>©2015 copyright | Perfect Holiday All Rights Reserved</p>
<ul class="social_icons">
<li class="social">
<a href="http://www.facebook.com/ourperfectholiday" target="_blank">
<img src="images/fb.png" />
</a>
</li>
<li class="social">
<a href="https://www.pinterest.com/OPerfectHoliday/" target="_blank">
<img src="images/pin.png" />
</a>
</li>
<li class="social">
<a href="https://instagram.com/perfectholiday.cheesecloth/" target="_blank">
<img src="images/insta.png" />
</a>
</li>
</ul>
</footer>
</div>
</div>
</body>
答案 2 :(得分：0)
嗨，只需从此css规则中删除px，因为z-index值不允许使用px值
#menu ul ul{
position:absolute;
visibility:hidden;
top:32px;
z-index:10;
}
这里是更新的js小提琴
<强> Updated fiddle