|
|
| Line 128: |
Line 128: |
| | | | |
| | | | |
| − | /*---------- BODY --------------------------------*/
| |
| − |
| |
| − | body {
| |
| − | text-align: center;
| |
| − | background: #e0e0e0;
| |
| − | padding-bottom: 200px;
| |
| − | }
| |
| − |
| |
| − | a {
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | /*---------- Wrapper --------------------*/
| |
| − |
| |
| − | nav {
| |
| − | width: 100%;
| |
| − | height: 80px;
| |
| − | background: #222;
| |
| − | }
| |
| − |
| |
| − | ul {
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | ul li {
| |
| − | font: 13px Verdana, 'Lucida Grande';
| |
| − | cursor: pointer;
| |
| − | -webkit-transition: padding .05s linear;
| |
| − | -moz-transition: padding .05s linear;
| |
| − | -ms-transition: padding .05s linear;
| |
| − | -o-transition: padding .05s linear;
| |
| − | transition: padding .05s linear;
| |
| − | }
| |
| − | ul li.drop {
| |
| − | position: relative;
| |
| − | }
| |
| − | ul > li {
| |
| − | display: inline-block;
| |
| − | }
| |
| − | ul li a {
| |
| − | line-height: 80px;
| |
| − | padding: 0 20px;
| |
| − | height: 80px;
| |
| − | color: #777;
| |
| − | -webkit-transition: all .1s ease-out;
| |
| − | -moz-transition: all .1s ease-out;
| |
| − | -ms-transition: all .1s ease-out;
| |
| − | -o-transition: all .1s ease-out;
| |
| − | transition: all .1s ease-out;
| |
| − | }
| |
| − | ul li a:hover {
| |
| − | color: #eee;
| |
| − | }
| |
| − |
| |
| − | .dropOut .triangle {
| |
| − | width: 0;
| |
| − | height: 0;
| |
| − | position: absolute;
| |
| − | border-left: 8px solid transparent;
| |
| − | border-right: 8px solid transparent;
| |
| − | border-bottom: 8px solid white;
| |
| − | top: -8px;
| |
| − | left: 50%;
| |
| − | margin-left: -8px;
| |
| − | }
| |
| − | .dropdownContain {
| |
| − | width: 160px;
| |
| − | position: absolute;
| |
| − | z-index: 2;
| |
| − | left: 50%;
| |
| − | margin-left: -80px; /* half of width */
| |
| − | top: -400px;
| |
| − | }
| |
| − | .dropOut {
| |
| − | width: 160px;
| |
| − | background: white;
| |
| − | float: left;
| |
| − | position: relative;
| |
| − | margin-top: 0px;
| |
| − | opacity: 0;
| |
| − | -webkit-border-radius: 4px;
| |
| − | -moz-border-radius: 4px;
| |
| − | border-radius: 4px;
| |
| − | -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
| |
| − | -moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
| |
| − | box-shadow: 0 1px 6px rgba(0,0,0,.15);
| |
| − | -webkit-transition: all .1s ease-out;
| |
| − | -moz-transition: all .1s ease-out;
| |
| − | -ms-transition: all .1s ease-out;
| |
| − | -o-transition: all .1s ease-out;
| |
| − | transition: all .1s ease-out;
| |
| − | }
| |
| − |
| |
| − | .dropOut ul {
| |
| − | float: left;
| |
| − | padding: 10px 0;
| |
| − | }
| |
| − | .dropOut ul li {
| |
| − | text-align: left;
| |
| − | float: left;
| |
| − | width: 125px;
| |
| − | padding: 12px 0 10px 15px;
| |
| − | margin: 0px 10px;
| |
| − | color: #777;
| |
| − | -webkit-border-radius: 4px;
| |
| − | -moz-border-radius: 4px;
| |
| − | border-radius: 4px;
| |
| − | -webkit-transition: background .1s ease-out;
| |
| − | -moz-transition: background .1s ease-out;
| |
| − | -ms-transition: background .1s ease-out;
| |
| − | -o-transition: background .1s ease-out;
| |
| − | transition: background .1s ease-out;
| |
| − | }
| |
| − |
| |
| − | .dropOut ul li:hover {
| |
| − | background: #f6f6f6;
| |
| − | }
| |
| − |
| |
| − | ul li:hover a { color: white; }
| |
| − | ul li:hover .dropdownContain { top: 65px; }
| |
| − | ul li:hover .underline { border-bottom-color: #777; }
| |
| − | ul li:hover .dropOut { opacity: 1; margin-top: 8px; }
| |
| | /*| Infographie de fond |*/ | | /*| Infographie de fond |*/ |
| | | | |
