0
我有一個網站主頁有一個菜單（與下拉）比圖像（文本overplayed）。無論出於何種原因，圖像浮動在菜單上方，因此當您將鼠標懸停在下拉菜單上時，它會隱藏圖像後面的菜單。 HTMLHTML下拉菜單隱藏圖像
* {
\t margin: 0;
\t padding: 0;
}
body {
\t background-color: #f3f3f3;
}
nav {
\t width: 100%;
\t height: 60px;
\t background-color: #fff;
\t position: fixed;
}
nav p {
\t font-family: arial;
\t color: #222;
\t font-size: 22px;
\t line-height: 55px;
\t float: left;
\t padding-left: 20px;
}
nav ul li {
\t list-style: none;
\t float: left;
\t position: relative;
\t text-transform: uppercase;
}
nav ul li a {
\t display: block;
\t padding: 21px 14px;
\t font-family: arial;
\t color: #222;
\t text-decoration: none;
}
nav ul li img {
\t float: right;
\t width: 8px;
\t padding-left: 6px;
\t position: relative;
\t top: 5px;
}
nav ul li ul {
\t display: none;
\t position: absolute;
\t padding: 10px;
\t background-color: #fff;
\t border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul {
\t display: block;
}
nav ul li ul li {
\t clear: both;
\t width: 180px;
\t border-radius: 4px;
}
nav ul li ul li a {
\t display: block;
\t padding: 11px 10px;
\t font-family: arial;
\t color: #222;
\t text-decoration: none;
}
nav ul li ul li:hover {
\t background-color: #eee;
}
.wrapper {
\t padding: 0px 0px
}
.search form {
\t list-style: none;
\t float: right;
\t position: relative;
\t padding-top: 8px;
\t padding-right: 20px;
}
.search input[type=text] {
width: 132px;
box-sizing: border-box;
border: 0.5px solid #ccc;
border-radius: 2px;
font-size: 16px;
background-color: white;
background-image: ('img/searchicon.png');
background-position: 10px 10px;
padding: 12px 20px 12px 40px;
}
.search input[type=text]:focus {
width: 300px;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h2 span.spacer {
padding:0 5px;
} here
\t <header>
\t \t <nav>
\t \t \t <p>Website Name</p>
\t \t \t <ul>
\t \t \t <li><a href="index.php">Home</a></li>
\t \t \t <li><a href="#">Resources <img src="img/dropdown.png"></a>
\t \t \t \t <ul>
\t \t \t \t \t <li><a href="#">About</a></li>
\t \t \t \t \t <li><a href="#">Archives</a></li>
\t \t \t \t \t <li><a href="#">Contact</a></li>
\t \t \t \t </ul>
\t \t \t </li>
\t \t \t <li><a href="#">Login</a></li>
\t \t \t </ul>
\t \t \t <div class="search">
\t \t \t \t <form>
\t \t \t \t \t <input type="text" name="search" placeholder="Search...">
\t \t \t \t </form>
\t \t \t </div>
\t \t </nav>
\t </header>
\t <p style="line-height:400%"> </p>
\t <section>
\t \t <div class="image">
<img src="img/Shome.jpg" alt="Rowing" width="100% height="500px">
\t <h2><span>Site Name: <br /> Portal and Online Archives</span></h2>
\t </div> \t \t \t
\t </section>