Problème avec le clics de souris et de position d'une <div>

vincent-diabolo
Les bases HTML/CSS

Bonjour à tous,
je suis debutant dans le HTML et le CSS et
je recrée mon site "jailbreaknovice.com" en html. celui-ci était un site wordpress.
Mais j'ai un soucis avec les clic des souris, je voudrai que la partie du menu qui ce trouve a droite face apparaitre les sous menu lorsque je clique dessus et je voudrais que ce sous menu reste apparent lorsque je relache le clic et que je sort du <dl>.
j'ai chercher pas mal de temps sur google pour trouver la solution mais rien....
Pour ce qui est du problème de positionnement c'est le menu de droite qui pose encore problème. j'aimerais que celui-ci reste caler sur la droite (comme le menu de gauche reste caler a gauche)
voici le code html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>jailbreaknovice</title>
  <link rel="stylesheet" media="screen" href="style.css">
</head>
<body>
    <div id="menu_g">
            <dl>
        <dt>Menu1</dt>
        <dd>
            <ul>
                <li><a href="index2.html">lien1</a></li>
                <li><a href="index2.html">lien2</a></li>
                <li><a href="index2.html">lien3</a></li>
            </ul>
        </dd>
    </dl>
    <dl>
        <dt>Menu2</dt>
        <dd>
            <ul>
                <li><a href="index2.html">lien4</a></li>
                <li><a href="index2.html">lien5</a></li>
                <li><a href="index2.html">lien6</a></li>
            </ul>
        </dd>
    </dl>
    <dl>
        <dt>Menu3</dt>
        <dd>
            <ul>
                <li><a href="index2.html">lien7</a></li>
                <li><a href="index2.html">lien8</a></li>
                <li><a href="index2.html">lien9</a></li>
            </ul>
        </dd>
    </dl>
    </div>
    <div id="menu_d">
            <dl>
        <dt>Menu1</dt>
        <dd>
            <ul>
                <li><a href="index2.html">lien1</a></li>
                <li><a href="index2.html">lien2</a></li>
                <li><a href="index2.html">lien3</a></li>
            </ul>
        </dd>
    </dl>
    <dl>
        <dt>Menu2</dt>
        <dd>
            <ul>
                <li><a href="index2.html">lien4</a></li>
                <li><a href="index2.html">lien5</a></li>
                <li><a href="index2.html">lien6</a></li>
            </ul>
        </dd>
    </dl>
    <dl>
        <dt>Menu3</dt>
        <dd>
            <ul>
                <li><a href="index2.html">lien7</a></li>
                <li><a href="index2.html">lien8</a></li>
                <li><a href="index2.html">lien9</a></li>
            </ul>
        </dd>
    </dl>
    </div>

    <div id="head">
        <div id="retour_home"><a href="index.html"></a></div>
    </div>

    <div id="slide"></div>

    <div id="contenu">
        <div id="cont_gauche"></div>
        <div id="cont_centre"></div>
        <div id="cont_droite"></div>
    </div>  
</body>
</html>

et voici le code CSS 

body{
    background-color: #383737;
}
h1{
    font-size:60px;
    line-height:10px;
}
h2{
    font-size:50px;
    line-height:10px;
}

/*barre de navigation*/
/*menu de gauche*/
#menu_g{
    width:1600px;
    height:59px;
    margin: 0 auto;
    position:relative;
    background: url(images/nav.png) no-repeat;
    display
}
#menu_g dl{
    float: left;
    height:59px;
    display:block;
    margin: 0;
    padding:0;
    font-family:Bank Gothic, Verdana, Myriad Pro;
    font-size: 22px;
}
#menu_g dt{
    color: white;
    display:block;
    height:59px;
    width:150px;
    line-height: 59px;
    text-align:center;
    cursor:pointer;
    border-right: 1px solid #383737;
}
#menu_g dd{
    color: white;
    display:block;
    margin:0;
    padding:0;
    background-color: #2d2d2c;
    opacity: 0.3;
    font: 18px/30px Bank;
}
#menu_g dd ul{
    margin:0;
    padding:0;
    text-align:center;
    list-style: none ;
}
#menu_g dd ul li a{
    color:white;
    text-decoration: none;
    height:30px;
    line-height: 30px;
    display:block;
    border-bottom: 1px dotted #72726f;
}
#menu_g dd ul li a:hover{
    background-color:red;
}
#menu_g dd ul li{
    color:red;
    text-decoration: none;
    height:30px;
    display:block;
}

#menu_g dl dd{
    display:none;
}
#menu_g dl:hover dd{
    display:block;
}

/*menu de droite*/
#menu_d{
    width:500px;
    height:59px;
    margin: 0 auto;
    position:absolute;
    margin-top: -59px;
    margin-left:1100px;
    padding:0;
    float: ;
}

#menu_d dl{
    float: right;
    height:59px;
    display:block;
    margin: 0;
    padding:0;
    font-family:Bank Gothic, Verdana, Myriad Pro;
    font-size: 22px;
}
#menu_d dt{
    color: white;
    display:block;
    height:59px;
    width:150px;
    line-height: 59px;
    text-align:center;
    cursor:pointer;
    border-left: 1px solid #383737;
}
#menu_d dd{
    color: white;
    display:block;
    margin:0;
    padding:0;
    background-color: #2d2d2c;
    opacity: 0.3;
    font: 18px/30px Bank;
}
#menu_d dd ul{
    margin:0;
    padding:0;
    text-align:center;
    list-style: none ;
}
#menu_d dd ul li a{
    color:white;
    text-decoration: none;
    height:30px;
    line-height: 30px;
    display:block;
    border-bottom: 1px dotted #72726f;
}
#menu_d dd ul li a:hover{
    background-color:red;
}
#menu_d dd ul li{
    color:red;
    text-decoration: none;
    height:30px;
    display:block;
}

#menu_d dl dd{
    display:none;
}
#menu_d dl:active dd{
    display:block;
}

/*header*/
#head{
    background-image:url(images/head.png);
    width:1600px;
    height:266px;
    margin:0 auto;
}
#retour_home a{
    height:117px;
    width:611px;
    margin-left:493px;
    margin-top:70px;
    display:block;
    position: absolute;

}

/*slider*/
#slide{
    background-image:url(images/slide.png);
    width:1600px;
    height:419px;
    margin:0 auto;
    display:block;
}
/*contenu footer/*/
#contenu{
    background-image:url(images/contenu.png);
    width:1600px;
    height:292px;
    margin:left auto;
    color: gray;
    margin:0 auto;
    text-align:center;
    font: italic 18px;
    font-family:Bank Gothic, Verdana, Myriad Pro;
}
#cont_gauche{
    height:250px;
    width:500px;
    text-align:left;
    margin-left: 40px;
    position:absolute;
    border-right: 1px solid #383737;
}
#cont_centre{
    height:250px;
    width:360px;
    text-align:left;
    margin-left:550px;
    position:absolute;
    line-height: 2px;
}
#cont_droite{
    height:250px;
    width:620px;
    text-align:left;
    margin-left: 890px;
}

Merci a tous pour vos future réponses et je vous dit a bientôt.
si vous voulez voir a quoi sa ressemble regardez sur jailbreaknovice.com
et si vous voulez les images pour voir encore de plus près je peux vous envoyer les images.

2 réponses

Gregory

Perso je vois pas l'intérêt de garder le menu ouvert une fois que tu sors du dl?
Sinon ton site est pas mal enfin il faudrait juste penser à la résolution car c'est plutôt gênant de devoir scroller à gauche et a droite pour voir l'ensemble du site

vincent-diabolo
Auteur

Merci pour ta reponse gregory L'intérêt de laisser le menu ouvert est de pouvoir accéder au menu même depuis un iPhone ou un iPad. Et pour ce qui est de la taille ( largeur) du site c'est juste que je suis sur Mac et qu'une fois safari afficher en plein écran je n'est pas de problème de scrolling. Mais si tu connais les messire standard je serais ravis de modifier la largeur pour plaire à tout le monde.