Reputation: 310

CSS styling on hover

I've got a CSS hover on my site here - http://www.match-a-match.com/site/users/ it's on the top right.

.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;
}

I want the content within the box tobe no wider than 240px

I tried adding:

max-width: 240px;

But this meant the box was 240px but the content still went across the whole screen. I can't figure out how to make the content fit the 240px box!

Any help would be hugely appreciated.

EDIT: Full Snippet with 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>

Upvotes: 0

Answers (3)

Robert Williams

Reputation: 1410

I have created a working codepen for you: https://codepen.io/Omi236/pen/gRZYQZ See if it helps.

.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>

Upvotes: 1

Jithin Raj P R

Reputation: 6797

I think this will solve your hover issue.

 .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;
 }

if you want more width to the hover content, please use left: -ve; values to .dropdown-content div.

Upvotes: 0

Gerard

Reputation: 15786

When looking at your site, I find the following:

@media screen and (max-width: 1680px)
  .container {
    width: 80em;
}

This is way too much. Something like 20em will make it all fit.

Upvotes: 0

CSS styling on hover

Answers (3)

Related Questions