【发布时间】：2017-05-28 06:44:10
【问题描述】：
我有一个网站主页，它有一个菜单（带有下拉菜单）而不是图像（带有过度播放的文本）。无论出于何种原因，图像都浮动在菜单上方，因此当您将鼠标悬停在下拉菜单上时，它会将菜单隐藏在图像后面。 HTML
* {
margin: 0;
padding: 0;
}
body {
background-color: #f3f3f3;
}
nav {
width: 100%;
height: 60px;
background-color: #fff;
position: fixed;
}
nav p {
font-family: arial;
color: #222;
font-size: 22px;
line-height: 55px;
float: left;
padding-left: 20px;
}
nav ul li {
list-style: none;
float: left;
position: relative;
text-transform: uppercase;
}
nav ul li a {
display: block;
padding: 21px 14px;
font-family: arial;
color: #222;
text-decoration: none;
}
nav ul li img {
float: right;
width: 8px;
padding-left: 6px;
position: relative;
top: 5px;
}
nav ul li ul {
display: none;
position: absolute;
padding: 10px;
background-color: #fff;
border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
clear: both;
width: 180px;
border-radius: 4px;
}
nav ul li ul li a {
display: block;
padding: 11px 10px;
font-family: arial;
color: #222;
text-decoration: none;
}
nav ul li ul li:hover {
background-color: #eee;
}
.wrapper {
padding: 0px 0px
}
.search form {
list-style: none;
float: right;
position: relative;
padding-top: 8px;
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
<header>
<nav>
<p>Website Name</p>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="#">Resources <img src="img/dropdown.png"></a>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
<li><a href="#">Login</a></li>
</ul>
<div class="search">
<form>
<input type="text" name="search" placeholder="Search...">
</form>
</div>
</nav>
</header>
<p style="line-height:400%"> </p>
<section>
<div class="image">
<img src="img/Shome.jpg" alt="Rowing" width="100% height="500px">
<h2><span>Site Name: <br /> Portal and Online Archives</span></h2>
</div>
</section>
【问题讨论】：
标签： html css drop-down-menu