Hover img to show an absolutely positioned div isn't working


Tags: html,css

Problem :

I'm trying to display absolutely positioned div #menu, default state top: -9999px; left: -9999px after a user hover over the image (so it should be like top: 100px; left: 20px).

But it's not working for me this way.

Take a look at my JSFiddle, maybe there is some mistake:

Here is my Css :

#menu{
height: 350px;
width: 280px;
position: absolute;
left: -9999px;
top: -9999px;
background-color: lightblue;
}

Here is my Fiddle

How can i fix this ?



Solution :

Here is something that will help you get what you need:

DIV

<div class="menu">
    hi
</div>

CSS

 .menu {
    margin: 10px;
    width: 50px;
    height: 50px;
    background-color: #06F;
    color: #fff;
    position: absolute;
    left: 10px;
    top: 0;
    }

.menu:hover {
     position: absolute;
    left: 0;
    top: 0;
}

DEMO


    CSS Howto..

    How to create the + button with CSS?

    Make nav dropdown show above all other divs

    How to apply css on one html file only

    How can I move this box in this HTML/CSS file?

    How to stop centering inside a table cell?

    How do I change linked stylesheets?

    How to mark up a tiled layout with CSS?

    Weird behavior when I'm alternating between showing and hiding Flot graphs

    How to make triangle shape in before a div in pure css?

    How do I use CSS to to vertically center align an image in a div?

    how to make layers not overlap with each other in css [closed]

    How to correct Div overlapping?

    How to create class in a custom CSS file by JavaScript?

    How to have an image incorporate in my text ? HTML CSS

    CSS - how to align different font-sizes to each other?

    how to align vertically an absolute element with a variable height above its parent?

    How to get background image from internal css using xpath?

    How to align image next to text and then stack them (responsive)

    How to position the element using absolute position?

    How to create spoiler text?

    How to put a div in center of browser using CSS?

    Table cells without borders having white lines - how do I disable them?

    How to correct css for IE?

    How to change class of valid form field - jQuery form validation plugin

    How to spread elements evenly (horizonatly)?

    css: how to remove pseudo elements (after, before, …)

    Showing the child category when Clicking the parent category

    How should I use `position` and other properties correctly to position my web page?

    How to change menu icon when scrolling to specific sections of the website?

    Ionic on Codepen: how to start a new pen and get Ionic support