Question

我有一个网站主页，其中包含一个菜单（带下拉菜单）而不是一个图像（文字被夸大）。无论出于何种原因，图像浮动在菜单上方，因此当您将鼠标悬停在下拉菜单上时，它会隐藏图像后面的菜单。的 HTML

＆＃13;

    var app = angular.module('app',['ui.router','ui.router.stateHelper','ngCookies']);
app.config(function($stateProvider){
index = {
    name : 'index',
    url : "",
    views : {
        'slider' :{
            templateUrl : 'template/slider.html',
            controller : 'slider_ctrl'
        },
        'content' : {
            templateUrl : 'template/posts-area.html',
            controller  : 'posts_ctrl'
        }
    }
};
single_post = {
    name : 'single_post',
    url  : '/t/{id:int}',
    views : {
        'content' : {
            templateUrl : 'template/single-post.html',
            controller  : 'single_post_ctrl'
        },
        'mem_handle' :{
            templateUrl :'template/lginform.html',
            controller : 'login_con'
        }
    }
};
loginstate = {
    name : 'single_post.loginstate',
    url : '/login',
    views : {
        'mem_handle' :{
            templateUrl :'template/lginform.html',
            controller : 'login_con'
        }

    }


};
regstate = {
    name : 'single_post.regstate',
    url  : '/register',
    views :{
        'mem_handle' :{
            templateUrl : 'template/regform.html',
            controller : 'reg_con'
        }
    }
};
memstate = {
    name : 'single_post.memstate',
    url : '/m/{id:string}/',
    views : {
        'content' : {
            template : 'member.html',
            controller : 'mem_controller'
        }
    }
}
$stateProvider.state('index',index);
$stateProvider.state('single_post',single_post);
$stateProvider.state('single_post.regstate',regstate);
$stateProvider.state('single_post.loginstate',loginstate);
$stateProvider.state('single_post.memstate',memstate);

});

＆＃13;

* {
    	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

＆＃13;

Answer 1

使用z-index在图片上方显示下拉列表。具有较大z-index的元素将位于较低z-index

的顶部

* {
    	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%">&nbsp;</p>
    	<section>
    		<div class="image">
    
          <img src="img/Shome.jpg" alt="Rowing" width="100% height="500px">
    	 <h2><span>Site Name: <br />&nbsp;&nbsp;Portal and Online Archives</span></h2>
    
    	</div>			
    	</section>

HTML按图像隐藏的下拉菜单

1 个答案: