Reputation: 422
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;
}
Upvotes: 0
Views: 156
Reputation: 10012
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.
Upvotes: 1