Question

I want to do this with CSS only. I have an unordered list and some hyperlinked list items and I want to limit the width and height of the links (list items) to width:300px and height:1.5em. So, no matter what the length of the links are, only up to 300px of the links will be showing and the rest will be hidden because of height limit and overflow:hidden. I want to show the rest of the link on mouse hover.

I can partially do this and hover over links shows the rest of the content BUT it also pushes down the content below it.

Is it possible, to show the rest of the content on mouseover WITHOUT pushing down the content below it?

Please see this fiddle ‘http://jsfiddle.net/3VyaC/’

Answer 1

Looks a little clunky, but it’s close to the effect you’re shooting for. Only changed your CSS:

body {font-family: arial; font-size: 0.8em;}

.news-entry ul {    
    list-style-type: none;  
    padding: 0; 
    margin: 0 0 0 8px;  
    width: 300px;      
}

.news-entry li {
    border-top: 1px solid #dcdcdc;
    width:300px;
    height:1.5em;
    overflow:hidden;
    position:relative;
}

.news-entry li a.itemtitle {    
    display: block; 
    width: 100%;    
    padding: 4px 0 3px 0;   
    line-height: 1.5em; 
    text-decoration: none;
}

.news-entry li:hover {
    color: #333;    
    background-color: #fafafa;
    overflow:visible;
    z-index:10;    
}

.news-entry li:hover a{
    position:absolute;
    width:100%;
    background-color:#fafafa;
    border:1px solid #555;      
}

Fiddle: http://jsfiddle.net/y3Vkt/

Might need to tweak the margins when the link changes to absolute position, there’s a 1-2px glitch.

Hope this helps!