我的网站上有一个 CSS 悬停 - http://www.match-a-match.com/site/users/它在右上角。
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
我希望盒子里的内容不超过240px
我尝试添加:
max-width: 240px;
但这意味着框是 240px，但内容仍然横跨整个屏幕。我不知道如何让内容适合 240 像素的框!
如有任何帮助，我们将不胜感激。
编辑:带 HTML 的完整代码段
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<body>
<div class="dropdown">
<span>Account Info / Sign In</span>
<div class="dropdown-content">
<?php session_start(); $sessData=! empty($_SESSION[ 'sessData'])?$_SESSION[ 'sessData']: ''; if(!empty($sessData[ 'status'][ 'msg'])){ $statusMsg=$ sessData[ 'status'][ 'msg']; $statusMsgType=$ sessData[ 'status'][ 'type']; unset($_SESSION[ 'sessData'][ 'status']); } ?>
<div class="container">
<?php if(!empty($sessData[ 'userLoggedIn']) && !empty($sessData[ 'userID'])){ include_once 'user.php'; $user=n ew User(); $conditions[ 'where']=a rray( 'id'=> $sessData['userID'], ); $conditions['return_type'] = 'single'; $userData = $user->getRows($conditions); ?>
<h2>Welcome <?php echo $userData['first_name']; ?>!</h2>
<div class="regisFrm">
<th><b>Id:</b>
<p>
<?php echo $userData[ 'id']; ?>
</p>
</th>
<th><b>Name:</b>
<p>
<?php echo $userData[ 'first_name']. ' '.$userData[ 'last_name']; ?>
</p>
</th>
<th><b>Email:</b>
<p>
<?php echo $userData[ 'email']; ?>
</p>
</th>
<th><b>Phone:</b>
<p>
<?php echo $userData[ 'phone']; ?>
</p>
</th>
<th><b>Main Position:</b>
<p>
<?php echo $userData[ 'main']; ?>
</p>
</th>
<th><b>Available:</b>
<p>
<?php echo $userData[ 'available']; ?>
</p>
</th>
<th><b>Additional Information:</b>
<p>
<?php echo $userData[ 'addt_info']; ?>
</p>
</th>
<br>
<form action="accepted_requests.php" method="post">
<input name="search" type="hidden" value="<?php echo $userData['id'] ?>">
<br>
<input type="submit" value="Accepted Requests" />
</form>
<form action="requests.php" method="post">
<input name="search" type="hidden" value="<?php echo $userData['id'] ?>">
<br>
<input type="submit" value="Pending Requests" />
</form>
<form action="declined_requests.php" method="post">
<input name="search" type="hidden" value="<?php echo $userData['id'] ?>">
<br>
<input type="submit" value="Declined Requests" />
</form>
<a href=update.php>Update Profile</a>
<br>
<a href="userAccount.php?logoutSubmit=1" class="logout">Logout</a>
<br>
<br>
</div>
<?php }else{ ?>
<h2>Login to Your Player Account</h2>
<?php echo !empty($statusMsg)? '<p class="'.$statusMsgType. '">'.$statusMsg. '</p>': ''; ?>
<div class="regisFrm">
<form action="userAccount.php" method="post">
<input type="email" name="email" placeholder="EMAIL" required="">
<input type="password" name="password" placeholder="PASSWORD" required="">
<div class="send-button">
<input type="submit" name="loginSubmit" value="LOGIN">
</div>
</form>
<p>Don't have an account? <a href="registration.php">Register</a>
<p>You are currently trying to login as a player, if you are a club please click <a href="http://localhost/register/Clubs/index.php">here</a>
</p>
</div>
<?php } ?>
</div>
</div>
</body>
</nav>
<a href="#navPanel" class="navPanelToggle"><span class="fa fa-bars"></span></a>
</div>
</header>
最佳答案
我已经为你创建了一个可用的 codepen:https://codepen.io/Omi236/pen/gRZYQZ看看是否有帮助。
.dropdown {
position: relative;
display: inline-block;
background: #ccc;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
background: #0099ff;
max-width: 240px;
}
.dropdown:hover .dropdown-content {
display: block;
}<div class="dropdown">
<a href="#">Hover Over</a>
<div class="dropdown-content">
<ul>
<li><a href="#"></a>Link 1</li>
<li><a href="#"></a>Link 2</li>
<li><a href="#"></a>Link 3</li>
<li><a href="#"></a>Link 4</li>
</ul>
</div>
</div>
关于悬停时的 CSS 样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45036552/