On Mouse Over Show X On Image

i want to show X mark on image , which is 24x24 size, for that i take li element and in element

Copy

---

You are using span so instead of equivalent selectors would be

Demo 2

ul > li > ul > li {
    position: relative;
}
ul > li > ul > li > span {
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
}
ul > li > ul > li:hover > span {
    display: block;
    color: #fff;
}

In the above selectors, it's having the same logic as above, the crucial part is to wrap the position: absolute; element inside a position: relative; container, and also about > selector, it means direct child, so I've specifically selected the levels of li you are having

Just get rid of the height: 25px; as well... and avoid using inline style declarations...

Solution 2:

set the parent of you span to relative and the span to absolute this is all you have to know

li{
    width:150px;
    height:150px;
    border:1px solid red;
    margin:20px;
    position:relative;
    list-style:none;
}
span{
    position:absolute;
    top:-10px;
    right:-10px;
    display:none; 
}

li:hover span{
    display:block;   
}

html

<li>
    <span>x</span>
</li>

DEMO

if you apply the rule on multiple elements it looks like this

Demo