Question

当鼠标移到图像上时，我试图使其变为8个链接左右，但该链接会掉下来，但被大型菜单覆盖了...我该如何解决？我尝试将下拉部分的背景放在重要位置，但这没用...有什么想法吗？任何可以帮助的人都会有所帮助，谢谢

代码：

<!DOCTYPE html>
<html>
	<head>
		<title>Homepage</title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
		<style>
			* {
  				box-sizing: border-box;
			}

			body {
  				margin: 0;
			}

			.navbar {
  				overflow: hidden;
  				background-color: #333;
  				font-family: Arial, Helvetica, sans-serif;
			}

			.navbar a {
  				float: left;
  				font-size: 16px;
  				color: white;
  				text-align: center;
  				padding: 14px 16px;
  				text-decoration: none;
			}

			.dropdown {
  				float: left;
  				overflow: hidden;
			}

			.dropdown .dropbtn {
  				font-size: 16px;  
  				border: none;
  				outline: none;
  				color: white;
  				padding: 14px 16px;
  				background-color: inherit;
  				font: inherit;
  				margin: 0;
			}

			.dropdown:hover .dropbtn {
  				background-color: #832893;
			}

			.dropdown-content {
  				display: none;
  				position: absolute;
  				background-color: #f9f9f9;
  				width: 100%;
  				left: 0;
  				box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  				z-index: 1;
			}

			.dropdown-content .header {
  				background: #832893;
  				padding: 16px;
  				color: white;
			}

			.dropdown:hover .dropdown-content {
  				display: block;
			}

/* Create three equal columns that floats next to each other */
			.column {
  				float: left;
  				width: 25%;
  				padding: 10px;
  				background-color: #ccc;
  				height: 250px;
			}

			.column a {
  				float: none;
  				color: black;
  				padding: 16px;
  				text-decoration: none;
  				display: block;
  				text-align: left;
  				cursor: pointer;
			}

			.column a:hover {
  				background-color: #ddd;
			}

/* Clear floats after the columns */
			.row:after {
  				content: "";
  				display: table;
  				clear: both;
			}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
			@media screen and (max-width: 600px) {
  				.column {
    				width: 100%;
    				height: auto;
  				}	
			}
/* profile Drop part that is not working correctly */
			.profilebtn {
				width: 30px;
				height: 30px;
				border-radius: 50%;
				float: right;
				margin-top: 0.8%;

			}
			.profile-dropdown {
  				position: relative;
  				display: inline-block;
			}
			.profile-content {
  				display: none;
  				position: absolute;
  				background-color: #f1f1f1 ;
  				min-width: 160px;
  				box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  				z-index: 1;
			}
			.profile-content a {
  				color: black;
  				padding: 12px 16px;
  				text-decoration: none;
  				display: block;
  				cursor: pointer;
			}
			.profile-content a:hover {background-color: #ddd;}
			.profile-dropdown:hover .profile-content {display: block;}
			.profile-dropdown:hover .profilebtn {background-color: #3e8e41;}
		</style>
	</head>
	
	<body>
		<div class="navbar">
  			<div class="dropdown">
    			<button class="dropbtn"><i class="fa fa-bars"></i></button>
   				<div class="dropdown-content">
      				<div class="header">
        				<h2>Mega Menu</h2>
      				</div>   
      			<div class="row">
        			<div class="column">
          				<h3>Media Centre:</h3>
          				<a href="homepage.html">link 1</a>
          				<a href="#">link 2</a>
          				<a href="#">link 3</a>
        			</div>
        			<div class="column">
          				<h3>category 2</h3>
          				<a>Link 1</a>
          				<a>Link 2</a>
          				<a>Link 3</a>
        			</div>
        			<div class="column">
        				<h3>category 3</h3>
          				<a>Link 1</a>
          				<a href="#">Link 2</a>
          				<a href="#">Link 3</a>
        			</div>
        			<div class="column">
          				<h3>category 4</h3>
          				<a href="#">link 1</a>
          				<a href="#">link 2</a>
          				<a href="#">link 3</a>
        			</div>
      			</div>
    			</div>
  			</div> 
 				<div class="profile-dropdown">
  					<img src="profilePicture.jpg" class="profilebtn">
  					<div class="profile-content">
    					<a>Link 1</a>
    					<a>Link 2</a>
    					<a>Link 3</a>
    					<a href="#">Link 4</a>
    					<a href="#">Link 5</a>
    					<a href="#">Link 6</a>
    					<a href="#">Link 7</a>
    					<a>Link 8</a>
  					</div>
				</div>
		</div>

	</body>
</html>

Answer 1

也许这会有所帮助

    .profile-dropdown {
        display: inline-block;
    }
    .profile-content {
        /*...*/
       top: 40px;   
    }
    .profile-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        flex: 0 50%;
        cursor: pointer;
    }
    .profile-dropdown:hover .profile-content {    
        display: flex;
        flex-wrap: wrap;
     }

下拉菜单出现错误

1 个答案: