Hello
je souhaiterais faire un menu du même genre que celui de ce site
http://mafft.cbrc.jp/alignment/server/
avec en plus un sous-menu qui apparait lorsque la souris passe au-dessus des sous-catégories.
Le tout, sans javascript.
Voici ce que j'ai pour l'instant.
Tout s'affiche comme prévu, sauf que le sous-menu n'apparait pas lorsque la souris passe sur "Translate ..."
Code :
- <div id='left_menu'>
- <div id="menu">
- <div class='category'>Query</div>
- <div class='sub_category'><a href="#">Search ...</a></div>
- <div class='sub_category'><a href="/cgi-bin/truc">Motif Scan</a></div>
- <div class='sub_category'><a href="#">Translate ...</a>
- <ul><!-- sous-sous-categories -->
- <li><a href="/cgi-bin/bidule">Translator</a></li>
- <li><a href="/cgi-bin/machin">Translatoror</a></li>
- </ul>
- </div>
- <div class='sub_category'><a href="#">Tools ...</a></div><br>
- <div class='category'>Hub</div>
- </div>
- </div>
|
Code :
- #menu{
- width: 100%;
- position: relative;
- text-align: left;
- z-index: 100;
- }
- .category{
- font-size: 20px;
- font-weight: bold;
- padding: 0 5px 0 33px;
- color: #66cdaa;
- }
- .sub_category{
- font-size: 18px;
- font-weight: normal;
- padding-left: 68px;
- color: #66cdaa;
- list-style-type: none;
- z-index: 100;
- }
- .sub_category a{
- text-decoration: none;
- color: #66cdaa;
- }
- .sub_category a:hover {
- color: #FFF;
- }
- .sub_category ul {
- display: none;
- position: absolute;
- }
- .sub_category a:hover ul{
- display: block;
- height: auto;
- z-index: 1000;
- }
|
Une idée ?
Merci