Posted By

ryanfiorini on 04/06/12

Tagged

Versions (?)

Last Edited at 04/06/12 03:27am

Statistics

Viewed 821 times

Favorited by 1 user(s)

Related snippets

Use CSS3 Media Screen to go from Horizontal Menu to dropdown

/ Published in: CSS

This will take the screen width into account and display either a horizontal menu or a dropdown menu with a hover style. Resize your window to see the effect.

Highlighted TextExpand

@media screen and (max-width: 600px) {
    #single {
        color: black;
        width: 42px;
        height: 30px;
        background: #ECEBEB url(images/menu-icon.png) no-repeat 10px center;
        padding: 8px 10px 0 42px;
        cursor: pointer;
        border: solid 1px #666;
        display: block;
    }
    #container:hover > #multiple{
        display:block;            
    }
    #multiple{
        clear: both;
        position: absolute;
        top: 38px;
        width: 160px;
        z-index: 10000;
        padding: 0px;
        background: #F8F8F8;
        border: solid 1px #999;
        display: none;
    }
}

#multiple li {
    list-style: none;
    float: left;
    background-color:pink;
    padding: 4px 15px;
    margin:5px;
    width:100px;
}Ã¢ï¿½ï¿½
</style>

<div id="container">
    <div id="single">My Family</div>
    <ul id="multiple">
        <li>ryan</li>
        <li>val</li>
        <li>alex</li>
        <li>mason</li>
        <li>angelina</li>
        <li>madison</li>
    </ul>
</div>Ã¢ï¿½ï¿½

URL: http://jsfiddle.net/ryanwfiorini/hWjmb/

Report this snippet Tweet