Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html><head>
- <meta charset="utf-8">
- <title>menu</title>
- <style>
- html,body {
- padding:0;
- margin:0;
- height:100%;
- }
- #menu, #menu ul {
- padding:0;
- margin:0;
- list-style: none;
- text-align: center;
- }
- #menu li {
- display:inline-block;
- vertical-align: top;
- position: relative;
- }
- #menu li li {
- display:inherit;
- }
- #menu a {
- display:block;
- padding:5px 50px;
- text-decoration: none;
- color:#fff;
- font-family:arial;
- }
- #menu ul li a {
- padding:5px 8px;
- }
- #menu ul {
- position: absolute;
- z-index: 1000;
- min-width:100%;
- white-space: nowrap;
- text-align: left;
- }
- #menu ul ul {
- left:100%;
- top:0;
- overflow: hidden;
- max-width: 0;
- min-width: 0;
- transition: 0.3s all;
- }
- #menu ul li:hover ul {
- max-width: 30em;
- }
- #menu ul li {
- max-height:0;
- overflow: hidden;
- transition:all 0.8s;
- }
- #menu li li li {
- max-height: inherit;
- }
- #menu li:hover li {
- max-height: 15em;
- overflow: visible;
- }
- /* background des liens menus */
- .violet {
- background-color: #65537A;
- background-image:linear-gradient(to bottom, #65537A 0%, #2A2333 100%);
- }
- .violet li {
- background:#2A2333
- }
- .violet li:hover {
- background:#65537A
- }
- .bleu {
- background-color: #729EBF;
- background-image:linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
- }
- .bleu li {
- background:#333A40
- }
- .bleu li:hover {
- background:#729EBF
- }
- .orange {
- background-color: #F6AD1A;
- background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);
- }
- .orange li {
- background-color:#9F391A;
- }
- .orange li:hover {
- background:#F6AD1A
- }
- .vert{
- background-color: #CFFF6A;
- background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%);
- }
- .vert li {
- background-color:#677F35
- }
- .vert li:hover {
- background:#CFFF6A
- }
- #menu li:hover {
- background-image:none;
- }
- #menu li:hover a, .menu li li:hover a {
- color:#000
- }
- #menu li:hover li a, #menu li:hover li li a {
- color:#fff
- }
- #menu li:hover a, #menu li li:hover a, #menu li li li:hover a {
- color:#000
- }
- </style>
- </head>
- <body>
- <ul id="menu">
- <li class="orange"><a href="#">Lien menu</a>
- <ul>
- <li><a href="#">Lien sous menu</a>
- <ul>
- <li><a href="#">Lien sous sous menu</a></li>
- <li><a href="#">Lien sous sous menu</a></li>
- <li><a href="#">Lien sous sous menu</a></li>
- </ul>
- </li>
- <li><a href="#">Lien sous menu</a>
- <ul>
- <li><a href="#">Lien sous sous menu</a></li>
- <li><a href="#">Lien sous sous menu</a></li>
- <li><a href="#">Lien sous sous menu</a></li>
- </ul>
- </li>
- <li><a href="#">Lien sous menu</a>
- <ul>
- <li><a href="#">Lien sous sous menu</a></li>
- <li><a href="#">Lien sous sous menu</a></li>
- <li><a href="#">Lien sous sous menu</a></li>
- </ul>
- </li>
- </ul>
- </li><!--
- -->
- </ul>
- </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement