Question

我的网站上有一个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，但内容仍然在整个屏幕上。我无法弄清楚如何使内容适合240px的盒子！

非常感谢任何帮助。

编辑：包含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>

Answer 1

我为您创建了一个有效的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>

Answer 2

查看您的网站时，我发现以下内容：

(?:\()(\d+)(?:\))

这太过分了。像20em这样的东西会让它变得合适。

Answer 3

我认为这可以解决您的悬停问题。

 .dropdown {
    position: relative;
    display: inline-block;
 }

 .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
    right: 0;
    }

 .dropdown:hover .dropdown-content {
    display: block;
 }
 .dropdown-content .container {
    width: 100% !important;
 }

如果您希望悬停内容的宽度更多，请使用left: -ve;值.dropdown-content div。

悬停时的CSS样式

3 个答案: