HTML tree full width hover effect

Question

I have an html tree which is mostly consisting of nested unordered lists.

I need to create a full width hover effect for each leaf, something similar with windows fi

Answer 1

I faced a similar situation few days ago.

Heres 1 way to approach it ( assuming you've got full control over the HTML )

HTML

    

        

            

                

                Node 1

            
            

                

                    

                        

                        Node 2
                    
                
            
        
    

CSS

.relative {
    position:relative;
}

.tree { 
    width: 300px; 
    border: 1px solid #000; 
    padding: 10px; 
    margin-bottom: 15px; 
}

.tree ul { margin: 0; padding: 0; list-style-type: none; }
.tree ul li { padding-left: 16px; }

/*.tree li .item { position: relative; }*/

.tree li .item .overlay { 
    position: absolute; 
    left: 0; 
    right:0;
    /*
    top: 0; 
    width: 100%; 
    height: 100%;
    */
    height:26px; /* well, thats a bummer */
    background-color: #C5E7E6; 
    display: none; 
    border: 1px solid red; 
}
.tree li .item:hover .overlay { display: block; }

Fiddle: http://jsfiddle.net/Varinder/5fKP4/2/