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


Tags: html,css

Problem :

I have a menu which has a colored background holder element. I need to make the selected menu-item a little bit higher than its holder, to achieve an affect of overflowing the holder.

<div class="menu-holder">
    <ul class="menu">
        <li class="menu-item menu-item-active">Home</li>
        <li class="menu-item">About us</li>
        <li class="menu-item">Services</li>
        <li class="menu-item">Contact</li>
    </ul>
</div>

This is what I tried: http://jsfiddle.net/X5U8p/1/

It looks similar to what I want but the active element looks like overflowing the holder from the bottom. I would like it to look like it is overflowing from the top.



Solution :

<edit>

to get li active overflowing over top of its parent, you need to set negative margins too :

DEMO

updated CSS from original answer (at bottom):

.menu-holder{
    height: 30px;
    margin-top:10px;
    background: #d6d6d6;
}

.menu{
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-item{
    display: inline-block;
    padding: 5px;
    cursor: pointer;
    vertical-align:bottom;
}

.menu-item-active, .menu-item:hover{
    background: #69265d;
    color: #fff;
    height: 30px;
    line-height:40px;
    margin-top:-10px;
}

end of</edit>


you can vertical-align each li to bottom and reset line-height for the one you wish to grow taller : DEMO

.menu-holder{
    background: #d6d6d6;
    height: 40px;
}

.menu{
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-item{
    display: inline-block;
    padding: 5px;
    cursor: pointer;
    vertical-align:bottom;
}

.menu-item-active{
    background: #69265d;
    color: #fff;
    height: 30px;/* + padding = 40px height */
    line-height:40px; /* send baseline down , fine if only one line of text*/
}

    CSS Howto..

    How to set footer responsive?

    Interface problem the right css style is not being called. How to call the right one?

    How to prevent CSS inline style when Browser Zoom in?

    How to get css button to stay active after it has been clicked?

    How to minified all js and css files using gruntfile.js in sails.js

    How to create a border that does't add a margin?

    Need the background to change when the mouse goes over the selected tab. How?

    How to use “all” property in CSS

    how to make observable a css class with knockout js

    How to create equal height columns in pure CSS [duplicate]

    How to get html elements from different class xpath?

    How do I apply css animations to angular2 components before they are destroyed/removed?

    How to handle caching of GWT theme CSS files

    CSS - How to achieve a mixed effect of “float left” and “text-align: center”?

    How do you square off only one corner of a div to be transparent in CSS?

    How to keep line breaks when using .text() method for jQuery?

    How to make a div hide properly on hover while trying to make a gif also start on hover

    How to shorten this placeholder-transitioning CSS selector using sass/compass?

    multiple CSS classes, how they work and WHY do it this way? [duplicate]

    CSS3 Slideshow: How to display a text for each image?

    How to put background after anchor tag throw css?

    How to edit the css style of validation ng-class error

    How do I refresh the qtip label to display new label for specific button on hover?

    CSS - How to pad an elements width by 50% of itself?

    css + how to have cells with a border and cells without a border

    How to make this CSS hamburger menu entirely clickable?

    How to make html to fill full screen height on webview in android browser

    CSS3 Menu Shows Up Wrong (CSS3/HTML5)

    How to Obtain Contents of HTML Element in CSS

    Jquery: show IMG on click