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..

    Design Issue: How to design a webpage that should show 11 elements with a description for each elements? [closed]

    How do you make an image or button glow when you mouse over using javascript or jquery?

    Div Title on div border how to [closed]

    How can I use CSS to position an image on the rightmost side?

    How to use psd elements in an upload form? [closed]

    How to avoid gaps using Isotope with Masonry layout sortby random

    CSS - How do I get my list element to fill 100% of the block

    how to fadein an inline element as a block element

    How can I use CSS to preserve line breaks in an HTML block?

    How to rotate a chart 90 degrees including the text values?

    How to use non-online images in CSS?

    How do I add a border to an (8 point star) css shape?

    How to override css property to default?

    How can I select an nth element without knowing the element in CSS?

    CSS: How to change class style if another style is hover

    how to make this “div” always visible to users

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

    How to call static block with styles.css

    How to get parent DIV width and set child DIV width

    How to create two CSS transitions in parallel on nested elements

    How do I show just one image and center it in a slider?

    How to have a box increase its size based on its content?

    How does calc() CSS property degrade in older browser

    How can I change the colour of individual squares on this grid…?

    How can I redirect a request file to real folder with htaccess?

    How browser renders HTML

    How to make agile layout?

    How do I import 2 different files icons?

    How do I use CSS and JS files within a HTML file being sent with Express?

    How to assign a css class or id to smileys?