Menu Déroulant Horizontal

Par LordBatoon sur Alsacréations

HTML

<!DOCTYPE HTML>

<html>

<head>

<meta charset="ISO-8859-1" />

<title>Barre de menu</title>

</head>

<body>

<div class="main">

    <div class="barre">

        <div class="boxCat">

        

            <div class="cat">

                <a class="aCat" href="#">Cat&eacute;gorie 1</a>

                <div class="colSubCat">

                    <div class="subCatFirst"><a class="aSubCatFirst" href="#">Sous-cat&eacute;gorie 1.1</a></div>

                    <div class="subCat"><a class="aSubCat" href="#">Sous-cat&eacute;gorie 1.2</a></div>

                    <div class="subCat"><a class="aSubCat" href="#">Sous-cat&eacute;gorie 1.3</a></div>

                    <div class="subCat"><a class="aSubCat" href="#">Sous-cat&eacute;gorie 1.4</a></div>

                    <div class="subCatLast"><a class="aSubCatLast" href="#">Sous-cat&eacute;gorie 1.5</a></div>

                </div><!-- .colSubCat -->        

            </div><!-- .cat -->

            

            <div class="cat">

                <a class="aCat" href="#">Cat&eacute;gorie 2</a>

                <div class="colSubCat">

                    <div class="subCatFirst"><a class="aSubCatFirst" href="#">Sous-cat&eacute;gorie 2.1</a></div>

                    <div class="subCat"><a class="aSubCat" href="#">Sous-cat&eacute;gorie 2.2</a></div>

                    <div class="subCatLast"><a class="aSubCatLast" href="#">Sous-cat&eacute;gorie 2.3</a></div>

                </div><!-- .colSubCat -->        

            </div><!-- .cat -->

            

            <div class="cat">

                <a class="aCat" href="#">Cat&eacute;gorie 3</a>

                <div class="colSubCat">

                    <div class="subCatSingle"><a class="aSubCatSingle" href="#">Sous-cat&eacute;gorie 3.1</a></div>

                </div><!-- .colSubCat -->        

            </div><!-- .cat -->

            

            <div class="catSingle">

                <a class="aCatSingle" href="#">Cat&eacute;gorie...

CSS

@charset "utf-8";
body { color:#000; background:#CCC; width:100%; }

.main {
    background-color:#999;
    width:980px;
    height:400px;
    margin:0 auto;
}
.barre {
    width:980px;
    height:50px;
    margin-top:40px;
    margin-left:0 auto;
    margin-right:0 auto;
    vertical-align:middle;
    position:relative;
    color:#FFF;
    font-family:Verdana, Geneva, sans-serif;
    background:#0097DB;
    border-top:1px solid #4BB0DE;
    border-bottom:1px solid #012D4B;
    background:-moz-linear-gradient(#0097DB, #044F82);
    background:-ms-linear-gradient(#0097DB, #044F82);
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #0097DB), color-stop(100%, #044F82));
    background:-webkit-linear-gradient(#0097DB, #044F82);
    background:-o-linear-gradient(#0097DB, #044F82);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0097DB', endColorstr='#044F82');
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#0097DB', endColorstr='#044F82')";
    background:linear-gradient(#0097DB, #044F82);
    text-align : center;
}
 .boxCat {
    margin: auto auto;
    line-height:50px;
    height:50px;
    text-align:center;
    display:inline-block;
    color:#FFF;
}
.cat {
    width:174px;
    line-height:50px;
    height:50px;
    display:inline-block;
    float:left;
    margin:0 9px 0 0;
    position:relative;
    text-align:center;
    font-size:16px;
    color:#FFF;
}
.cat:hover a.aCat {
    background:#0097DB;
    background:-moz-linear-gradient(#0097DB, #044F82);
    background:-ms-linear-gradient(#0097DB, #044F82);
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #0097DB), color-stop(100%, #044F82));
    background:-webkit-linear-gradient(#0097DB, #044F82);
    background:-o-linear-gradient(#0097DB, #044F82);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0097DB', endColorstr='#044F82');
   ...