Menu mootools et CSS

Bonjour à tous,

J'ai repris un tutoriel trouver sur un site web pour réaliser un menu contenant des sous menus, et utilisant un effet Slide de mootools 1.2.

Ce menu est fait avec des listes HTML, et lorsque l'on survole un élément du menu, le sous menu correspondant déroule en mode vertical.

J'aimerais que ce menu se déroule mais en mode horizontal, je ne sais pas trop ou modifier, CSS ou Javascript.

Voici le code pour mieux voir :

HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<div id="menu-container">    
        <ul id="drop_down_menu">
            <li class="menu"><a href="#">HOME</a>
                <ul class="links">
                    <li><a href="#">LINK 1</a></li>
                    <li><a href="#">LINK 2</a></li>
                </ul>
            </li>
            <li class="menu"><a href="#">FEATURES</a>
                <ul class="links">
                    <li><a href="#">LINK 1</a></li>
                    <li><a href="#">LINK 2</a></li>
                    <li><a href="#">LINK 3</a></li>
                </ul>
 
            </li>
            <li class="menu"><a href="#">BUY</a>
                <ul class="links">
                    <li><a href="#">LINK 1</a></li>
                    <li><a href="#">LINK 2</a></li>
                    <li><a href="#">LINK 3</a></li>
                    <li><a href="#">LINK 4</a></li>
 
                </ul>
            </li>
            <li class="menu"><a href="#">SUPPORT</a>
                <ul class="links">
                    <li><a href="#">LINK 1</a></li>
                    <li><a href="#">LINK 2</a></li>
                </ul>
            </li>
 
        </ul>
    </div>

CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
#menu-container 
{
    font-size:11px;
    width:1024px;
    height:40px;
    background-color:#2790CA;
}
 
#drop_down_menu
{
    text-align:left;
    list-style-type:none;
    text-align:center;
    float:right;
}
 
#drop_down_menu li
{    
    background-color:#2790CA;
    width:150px;
    float:left;
}
 
#drop_down_menu li a
{
    font-size:12px;
    font-weight:bold;
    color:#FFFFFF;
    cursor:pointer;
    text-decoration:none;
}
 
 
#drop_down_menu li ul
{
    margin:0px;
    padding:0px;
    list-style-type:none;
    margin-top:10px;
}
 
#drop_down_menu li ul li 
{
    display:block;
    float:none;
    clear:both;
    padding-top:10px;
}
 
#drop_down_menu li ul li a
{
    color:#FFFFFF;
    font-weight:normal;
    text-decoration:none;
    display:block;
}
 
#drop_down_menu li ul li a:HOVER
{
    text-decoration:underline;
    color:#CCCCCC;
}

JS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    window.addEvent('domready', function(){
        $('drop_down_menu').getElements('li.menu').each( function( elem ){
            var list = elem.getElement('ul.links');    
            var myFx = new Fx.Slide(list).hide();            
            elem.addEvents({
                'mouseenter' : function(){                     
                    myFx.cancel();
                    myFx.slideIn();                    
                },
                'mouseleave' : function(){ 
                    myFx.cancel();
                    myFx.slideOut();                    
                }
            });    
        })
    });

A cela s'ajoute la librairie mootools 1.2.
Mon but est que le sous menu correspondant au menu sur lequel la souris est positionné déroule horizontalement, les sous menu les uns à côté des autres.

Merci de l'aide,

As-tu essayé en mettant un display:inline à tes li du sous-menu ?

Bonjour,

J'ai modifié cette partie du code CSS :
Code:

1 2 3 4 5 6 7 8 #drop_down_menu li ul li { display:inline; float:none; clear:both; padding-top:10px; }
Le menu est toujours déroulant verticalement, il y a juste que l'espace (padding-top:10px) n'existe plus entre les liens.

Salut,

Maintenant il faudrait que tu mettes un position:absolute au ul.links pour sortir du flux du li parent

Bonjour,

J'ai rajouté le code suivant :
Code:

1 2 3 4 5 ul.links { position:absolute; }
Au passage de la souris sur les menus, les sous menu ne fonctionnent plus, aucun menu ne se déroule.