Bonsoir à tous,
J'essaie de faire des genre de menus horizontaux sur base de liste à puce (horizontaux, pas déroulants). J'arrive à ceci
Mon problème : le choix 2.1 est en dessous du 2 au lieu d'être en dessous du choix 1
Le 1.1 est, lui, bien en dessous du 1 et le 1.2 en dessous du 2 (et à coté du 1.1)
Code :
- <ul id="test">
- <li class="par2"><a href="">Choix 1</a>
- <ul>
- <li class="par2"><a href="">Choix 1.1</a></li>
- <li class="par2"><a href="">Choix 1.2</a></li>
- </ul>
- </li>
- <li class="par2"><a href="">Choix 2</a>
- <ul>
- <li class="par2"><a href="">Choix 2.1</a></li>
- <li class="par2"><a href="">Choix 2.2</a></li>
- </ul>
- </li>
- </ul>
|
et le css
Code :
- #test {
- padding:0;
- margin:0;
- background-color:yellow;
- overflow:hidden;
- }
- #test>li>ul {
- position:absolute;
- display:none;
- padding:0;
- margin:0;
- background-color:cyan;
- overflow:hidden;
- }
- #test>li:hover>ul {
- display:block;
- }
- .par2 {
- float:left;
- width:322px;
- margin:10px 0;
- list-style-type:none;
- text-align:center;
- }
- .par2+.par2 {
- margin-left:20px;
- }
- .par2>a {
- display:block;
- padding:10px 4px;
- background-color:rgba(74,147,143,0.6);
- color:white;
- }
- .par2>a:hover {
- text-decoration:none;
- background-color:#4a938f;
- }
|
Une idée ?
Message édité par zezette le 07-04-2015 à 15:43:26
---------------
"Par moment j'me d'mande si chui pas con" G. de Suresnes
