Question

I have a div that currently appears on hover over of another div.

I need it to remain open all the time and I’m also trying to fix it so that a visitor can minimize it.

The problem is that I don’t know how to achieve to keep it open all the time. I see the ‘hover’ class that appears on the CSS but I’m not able to locate it in the php/html file.

Not sure if the code helps, but here’s what I have:

<div id="main_navigation" class="hor_navigation clearfix">
        <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'theme_location' => 'header', 'depth' =>'2', 'container' => 'none' ) ); ?>
    </div><!-- #navigation -->

    <?php if ( !is_user_logged_in() ): ?>
        <div id="nav_subscription" class="subscription_form clearfix">
            <span id="subscribe_dd" class="contrast"><?php gb_e( 'Get the Latest Deals' ) ?></span>
            <div id="subscription_form_wrap" style="display: block;">
            <a id="dialog-minimize" href="#" onclick="minimize();" style="display: block;"><span>Min</span></a>
                        <a id="dialog-minimize-return" href="#" onclick="minimize_restore();" style="display:none;"><span>Min</span></a>
</div>
</div><!-- #header_subscription.subscription_form -->
    <?php endif ?>

CSS

#subscription_form_wrap {
    -webkit-border-bottom-right-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-radius-bottomright: 8px;
    -moz-border-radius-bottomleft: 8px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    background: none;
    background: none;
    background-color: white;
    padding: 0 8px 10px 8px;
    float: right;
    position: absolute;
    top: 28px;
    right: 0;
    height: auto;
    min-width: 200px;
    display: block;
    font-size: 13px;
    }

    #subscribe_dd {
    font-weight: bold;
    text-align: right;
    white-space: nowrap;
    padding: 10px 20px 5px;
    height: 10px;
    text-shadow: rgba(0, 0, 0, 0.5) 0 1px;
    position: absolute;
    top: 0;
    right: 0;
    -moz-border-radius-bottomright: 8px;
    -webkit-border-bottom-right-radius: 8px;
    border-bottom-right-radius: 8px;
    z-index: 10;
    border-bottom: 1px solid #CCC;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    line-height: 5px;
    background-color: #999999;
    color: #FFFFFF;
    }

Answer 1

You need to remove the display: block; from the element

  <div id="subscription_form_wrap" style="display: block;">

becomes

  <div id="subscription_form_wrap">

as the javascript deals with adding that extra style when you click on the grey block, as it currently makes it show by default by having that style in.