How to make div stay visible when hovering on it


Tags: html,css,css3

Problem :

I have a menu that contains a button, and if you hover on it a "popup" appears above it. My problem is that i want the div to be visible if the user moves the mouse over to the "popup". Does anyone have some tips on how to continue? http://jsfiddle.net/c6fYt/

HTML

<div id="footer">
        <ul id="list">
            <li class="button">Button 1</li>
            <li class="box">AWBGBABBgehahnaphneaneihnahipneanpen</li>
        </ul>
    </div>

CSS

#footer {
position:absolute;
bottom:1px;
width:100%;
min-width:800px;
height:50px;
background-color:rgba(255, 255, 255, 0.3);
box-shadow:0px 0px 1px rgba(0, 0, 0, 1.0) inset, 0px 10px 5px 1px rgba(255, 255, 255, 0.1) inset, 0px 35px 20px rgba(255, 255, 255, 0.2) inset;
}


#list {
list-style:none;
display:inline;
}

.button {/*box-shadow: h-shadow v-shadow blur spread color inset;*/
width:125px;
background-color:rgba(248, 248, 255, 0.25);
border-right:1px solid rgba(255, 255, 255, 0.7);
margin:1px 0px 0px 0px;
padding:15px 0px;
text-align:center;
float:left;
color:rgba(0, 0, 0, 1.0);
}

.button:hover {
background-color:rgba(248, 248, 255, 0.45);
}

.button:hover + .box {
display:block;
}

.box {
background-color:rgba(0,0,0,0.4);
width:auto;
min-width:50px;
height:250px;
margin-top:-250px;
margin-left:-125px;
float:left;
display:none;
}


Solution :

.button:hover + .box, .box:hover {
    display:block;
}

Fiddle: http://jsfiddle.net/c6fYt/1/


    CSS Howto..

    CSS Rollovers: how to maintain “hit area” size when hidden image is larger than anchor area

    How do I move the background image of a DIV based on the scrollbar movement?

    How to target items

    How much media queries?

    How/where to center Items on Webpage

    JavaScript how to get this html to read this css and organise my script into the table

    How can I change css for every DOM object in the page in SAPUI5

    How do I select the TD of the TH to which it references with only CSS?

    How to Programatically Toggle a Zurb Foundation Switch Control, in Chrome?

    how the rises up and down button is made?

    How to make one list-item in menu higher than the others with CSS?

    How to apply CSS to 2x2 classes?

    How to use Bootstrap Glyphicons in Holder.js images

    How to force resize inside iframe?

    How to add a rollover effect to the text on a map

    How to positioning an element over another in CSS

    How can i find and change css style in ruby?

    How to prevent slider from stretching?

    How do I get this HTML canvas animation to appear on top of my image?

    How can I prevent the textarea from stretching beyond his parent DIV element? (google-chrome issue only)

    How to hide all element on html page except one div using css?

    how to customize css ellipse for a text string [duplicate]

    How to create rounded edge panel in ExtJS 2.1

    CSS: how to center a list with image

    How to reuse css styles from Telerik RadControls for ASP.NET Ajax

    How to make one Div's position (not child or parent) completely linked / dependent on another Div's position?

    How do you size an SWF object based on a Blueprint CSS span range?

    How to center social buttons in bootstrap login page?

    CSS & Button: How to override native CSS of html buttons element?

    How to prevent the jump during css transition?