28234 sujets

CSS et mise en forme, CSS3

[Résolu] Pour mettre mon menu deroulant à droite

Bonjour,
Je débute, et je bloque sur le placement d'un menu déroulant qui reste à gauche désespérément...
Pouvez vous m'aider svp ?
voici mon HTML :
<!DOCTYPE html>
<html>
    
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css"/>
    <title>Accueil | Feather Ink'well</title>
</head>

<header>
<ul id="menu">
    <li><a href="index.html">ACCUEIL</a></li>
    <li><a href="#">NOTRE SHOP</a></li>
    <li><a href="#">TATOUAGES</a>
       <ul class="sousmenu">
           <li><a href="#">BLACK WORK</a></li>
           <li><a href="#">DOT WORK</a></li>
           <li><a href="#">ORNEMENTAL</a></li>
           <li><a href="#">TRASH POLKA</a></li>
       </ul>
    </li>
    <li><a href="#">PIERCINGS</a>
       <ul class="sousmenu">
           <li><a href="#">VISAGE</a></li>
           <li><a href="#">POITRINE/VENTRE</a></li>
           <li><a href="#">MICRO-DERMAL</a></li>
       </ul>
    </li>
    <li><a href="#">FOIRE AUX QUESTIONS</a></li>
    <li><a href="#">PRENDRE RENDEZ-VOUS</a></li>
    <!--FORMULAIRE AVEC CHAMPS DE SAISIE-->
    <li><a href="#">CONTACT</a>
    </li>
</ul>
</header>
    
<body>
    <h1>BIENVENUE À "FEATHER INK'WELL"</h1>
    <p class="introduction">À la recherche d'un environnement accueillant pour votre prochain projet (tatouage ou piercing) ?</p>
    <p class="introduction">Passez nous voir !</p>
</body>


et mon CSS :
body {
    background-color: black;
}

h1 {
    color: aliceblue;
    font-size: 40px;
    font-family: "Arial Black";
    text-align: center;
    text-decoration: underline;
    margin-top: 150px;
}

.introduction {
    color: aliceblue;
    font-family: sans-serif;
    font-size: 15px;
    text-align: center;
}

/* mise en forme du menu déroulant */

body {
    font: 11px verdana, sans-serif;
    margin: 0;
    padding: 50px;
}

#menu {
    float: right;
    width: auto;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
}

#menu li {
    float: left;
    text-align: center;
    width: 110px;
    margin: 0;
    padding: 0;
    border: 0px;
}

#menu .sousmenu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
}

#menu .sousmenu li {
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
}

/* apparence du menu déroulant */

#menu li a:link, #menu li a:visited {
    display: block;
    height: 1%;
    color: floralwhite;
    background-color: black;
    margin: 0;
    padding: 4px 8px;
    text-decoration: none;
}

#menu li a:hover {
    background-color: grey;
    color: rebeccapurple
}

#menu li a: active {background-color: lightgray}

#menu .sousmenu li a:link, #menu .sousmenu li a:visited {
    display: block;
    color: white;
    margin: 0;
    border: 0;
    text-decoration: none;
    background-color: black;
}

#menu .sousmenu li a:hover {
    background-image: none;
    background-color: grey;
    color: rebeccapurple;
}

#menu .sousmenu li {
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
    width: 109px;
    border-top: 1px solid transparent;
}

#menu .sousmenu {
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
}

#menu li:hover > .sousmenu {display: block;}

#menu {
    width: auto;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
    position: absolute ;
    top: 0;
    left: 0;
}

Modifié par steph13web (20 Jan 2020 - 16:15)
Salut,
Alors tout d'abord, ta structure HTML n'est pas valide.
En effet, tout ce qui figure dans ta balise <header> doit être inséré dans ta balise <body>.
Tu peux aussi englober le contenu principale dans une balise <main>.

Du coup, ça donnerait un truc comme ça : 


<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Accueil | Feather Ink'well</title>
  </head>

  <body>
    <header>
      <ul id="menu">
        <li><a href="index.html">ACCUEIL</a></li>
        <li><a href="#">NOTRE SHOP</a></li>
        <li><a href="#">TATOUAGES</a>
          <ul class="sousmenu">
            <li><a href="#">BLACK WORK</a></li>
            <li><a href="#">DOT WORK</a></li>
            <li><a href="#">ORNEMENTAL</a></li>
            <li><a href="#">TRASH POLKA</a></li>
          </ul>
        </li>
        <li><a href="#">PIERCINGS</a>
          <ul class="sousmenu">
            <li><a href="#">VISAGE</a></li>
            <li><a href="#">POITRINE/VENTRE</a></li>
            <li><a href="#">MICRO-DERMAL</a></li>
          </ul>
        </li>
        <li><a href="#">FOIRE AUX QUESTIONS</a></li>
        <li><a href="#">PRENDRE RENDEZ-VOUS</a></li>
        <!--FORMULAIRE AVEC CHAMPS DE SAISIE-->
        <li><a href="#">CONTACT</a>
        </li>
      </ul>
    </header>

    <main>
      <h1>BIENVENUE À "FEATHER INK'WELL"</h1>
      <p class="introduction">À la recherche d'un environnement accueillant pour votre prochain projet (tatouage ou
        piercing) ?</p>
      <p class="introduction">Passez nous voir !</p>
    </main>

  </body>

</html>


Enfin concernant le fait que ton menu reste à gauche, c'est parce que tu définis deux fois les styles du #menu.

Une première fois, tu as écris : 

#menu {
    float: right;
    width: auto;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
}


Et en fin de code, tu surcharges ces styles avec ce code : 

#menu {
    width: auto;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
    position: absolute ;
    top: 0;
    left: 0;
}


Du coup pour résoudre ton problème, il te suffit de supprimer les styles de surcharge Smiley smile
Sujet clos
Aller à