Site en html5 menu css vertical - le déroulant pas top

Bonjour,

En premier, un grand merci pour le partage d'informations qui apporte énormément, cela m'a beaucoup aider a évoluer sur le design de mon site.

Le site en question : www.decre.org

Je travail en dev sur mon poste, je travail la refonte du menu avec un code uniquement en CSS. J'ai fait mon site à travers un template HTML5 et CSS3 j'utilise le principe des blocks pour les différentes éléments du site (menu haut, pied de page, menu vertical, contenue).

Je me retrouve confronté au fait que je dois avoir la balise "display: block" au niveau des éléments du coup je n'arrive pas a cacher la sous-couche du menu vertical. J'aimerais avoir le titre en année qui s'affiche seulement quand l'utilisateur click ou passe sur le titre ($année) alors les chemins dessous se montre.

Cela fait plusieurs jours et plusieurs fois que je me bas avec mon code. Pouvez-vous m'aider?

<div id="standard">
<ul>
                <h3>Toutes les news</h3>
                <img src="images/logo/desert.gif" alt="" /><br /><br />
                <br>

        <li class="dropdown"><a href=2012a.php#>2012
        <br>
        <br>
                <ul class="dropdown-vertical">
                                        <li><a href="dakar12a.php#">Rallye Dakar </a></li>

                                        <li><a href="silkway12a.php#">Rallye Silkway</a></li>

                                        <li><a href="maroc12a.php#">Rallye du Maroc</a></li>

                                        <li><a href="presentation.php#">Presentation</a></li>

                </ul>

        </li>

   <br>
        <br>

CSS :

/* reset */
* {
margin: 0;
padding: 0;
}

/* render html5 elements as block */
header, footer, section, aside, nav, article {
display: block;
}

body {
line-height: 1;
background: #62ADAF;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #407E80;
font-size: 14px;
line-height: 18px;
}

/* layout */

#wrapper {
width: 940px;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
border: 7px solid #CFCFCF;
background: #62ADAF;
font-style: italic;

/* curved border radius */
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}

nav {
width: 940px;
height: 50px;
margin: 0 auto;
background: #CFCFCF;
}

#main {
width: 940px;
margin: 0 auto;
padding-top: 30px;
background: #CFCFCF url(images/colbg.png) repeat-y;
overflow: hidden;
}

#content {
float: right;
width: 640px;
margin: 0 0 10px 0;
padding: 10px 30px 5px 0;
}

#sidebar {
float: left;
padding: 10px 0 0 20px;
width: 220px;
}

footer {
width: 940px;
margin: 0 auto;
clear: both;
}

/* basics */

h1,h2,h3,h4,h5,h6 {
font-weight: bold;
clear: both;
color: #333;
}

a:link, a:visited {
color:#226D6F;
}

a:hover, a:active {
color: #333;
}

p {
margin-bottom: 18px;
}

li {
padding-left: 5px;
}

/* nav */

nav {
margin: 0 auto;
display: block;
float: left;
margin-top: 5px;
}

nav .menu {
font-size: 16px;
font-weight: bold;
margin-left: 12px;
}

nav .menu ul {
list-style: none;
margin: 0;
}

nav .menu li {
float: left;
position: relative;
}

nav .menu a {
display: block;
text-decoration: none;
color: #ccc;
padding: 0 30px;
line-height: 50px;
}
nav .menu a:hover {
color: #fff;
text-decoration: underline;
}

/* nav dropdowns */
nav .menu li ul {
display: none;
z-index: 8888;
}

nav .menu ul li a {
text-decoration: none;
color: #407E80;
background: #CFCFCF;
margin-left: 1px;
white-space: nowrap;
}
nav .menu ul li a:hover {
background: #888;
}

nav .menu li:hover ul {
position: absolute;
}

nav .menu li:hover li {
float: none;
}

nav .menu li:hover a {
background: #888;
}

nav .menu li:hover li a:hover {
background: #333;
}

/** HEADER */

header {
padding: 5px 0 0 0;
}

header>h1 {
float: left;
margin: 0 0 18px 10px;
width: 600px;
font-size: 25px;
line-height: 36px;
}

header>h1 a:link, header>h1 a:visited {
color: #407E80;
font-weight: bold;
text-decoration: none;
text-shadow: 0px 2px 3px #555;
}

header>h2 {
color: #777;
clear: right;
float: right;
font-style: italic;
font-size: 14px;
margin: 14px 10px 18px 0;
}

/** ARTICLES **/

article {
float: left;
padding: 20px 10px 10px 10px;
width: 620px;
}

.featured {
width: 620px;
float: left;
margin-bottom: 10px;
background: #62ADAF;
/* curved border radius */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

article .featuredthumb {
float: left;
width: 240px;
height: 200px;
/* curved border radius */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

article .featuredtitle {
float: right;
width: 350px;
font-size: 20px;
margin-auto: 5px;
font-weight: bold;
line-height: 1.8em;
}

article .featuredstory {
float: right;
width: 350px;
}

article .thumb {
float: right;
width: 110px;
height: 80px;
/* curved border radius */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

article .title {
float: left;
width: 500px;
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}

article .story {
float: left;
width: 500px;
font-size: 12px;
}

.even {
border-top: 1px solid #999;
border-bottom: 1px solid #999;
}



#content h1, h2, h3, h4, h5, h6 {
color: #407E80;
margin: 0 0 20px 0;
line-height: 1.5em;
}

.alignleft, img.alignleft {
display: inline;
float: left;
margin-right: 10px;
}

.alignright, img.alignright {
display: inline;
float: right;
margin-left: 10px;
}

.aligncenter, img.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}

#lightboxthumbs {
text-align: center;
padding-bottom: 10px;
border: 15px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}

.frameit {
border: 5px #CFCFCF solid;
margin-right: 18px;
/* curved border radius
-moz-border-radius: 10px;
-webkit-border-radius: 10px;*/
}

.frameitlast {
border: 5px #CFCFCF solid;
/* curved border radius
-moz-border-radius: 10px;
-webkit-border-radius: 10px;*/
}
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style-type: none;
 margin: 1;
 padding: 1;
display: none;
}

ul.dropdown {
list-style-type: none;
 z-index: 597;
 float: left;
display: none;
}

ul.dropdown li {
 min-height: 1px;
 line-height: 1.3em;
 vertical-align: middle;
 display: none;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 position: absolute;
display: none;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
list-style-type: none;
}

ul.dropdown ul li {
position: absolute;
 float: none;
display: none;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
list-style-type: none;
display: none;
}

ul.dropdown li:hover > ul {
diplay: block;
}

/* fin css menu vertical deroulant */

/* Essai menu gauche déroulant avec Jquery */


/* sidebar and footer widget blocks */

.dropdown-vertical li:hover {
width: 310;
font: 14px normal Verdana, Arial, Helvetica, sans-serif;
}

ul.tabs {
margin: 0;
padding: 0;
float: left;
/*height: 32px;*/
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
list-style-type: none;
}

ul.tabs li {
float: left;
margin: 0;
padding: 0;
/*height: 31px;*/
/*line-height: 31px;*/
border: 1px solid #999;
border-left: none;
margin-bottom: 1px;
background: #e0e0e0;
position: relative;
}

ul.tabs li a {
text-decoration: none;
color: #000;
font-size: 1.2em;
padding: 0 0px;
border: 1px solid #fff;
outline: none;
}

ul.tabs li a:hover {
background: #ccc;
}      

html ul.tabs li.active, html ul.tabs li.active a:hover  {
background: #62ADAF;
border-bottom: 0px solid #BDBFE1;
}

aside .standard h3 {
font-size: 18px;
text-shadow: 0px 2px 3px #ddd;
display: none;
visibility: visible;
}

aside .standard ul {
list-style: none;
color: #bbb;
margin: -15px 0 15px 25px;
}

#footer-area {
background: #62ADAF;
color: #FFF;
font-size: 90%;
padding: 18px 0;
overflow: hidden;
/* curved border radius */
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
}

.footer-segment {
float: left;
margin-right: 20px;
margin-left: 20px;
width: 190px;
}

footer aside h4 {
color: #faf0e6;
font-size: 16px;
line-height: 1.5em;
}

footer ul {
list-style: none;
margin: -15px 0;
}

footer a:link, footer a:visited {
color: #ccc;
}

footer a:hover {
text-decoration: underline;
}

footer p {
margin-top: -15px;
color: #faf0e6;
}

Salut Yiujia,

Merci pour ta réponse.

En fait, c'est déjà le cas, d'où mon blème

Il semble que le prob, soit le fait que l'élément "aside" qui est le block gauche de la page soit prioritaire sur la balise "dropdown", mais je ne sais pas ce n'est qu'une supposition.

As-tu une idée?

/* render html5 elements as block */
header, footer, section, aside, nav, article {
display: block;
}

...

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style-type: none;
 margin: 1;
 padding: 1;
display: none;
}

ul.dropdown {
list-style-type: none;
 z-index: 597;
 float: left;
display: none;
}

ul.dropdown li {
 min-height: 1px;
 line-height: 1.3em;
 vertical-align: middle;
 display: none;
}

ul.dropdown li:hover {
 z-index: 599;
 cursor: default;
diplay: block;
}

ul.dropdown li:hover > ul {
diplay: block;
}

ul.dropdown ul {
 position: absolute;
 display: none;
 z-index: 598;
 width: 100%;
 top: 1px;
 left: 99%;
 list-style-type: none;
}

ul.dropdown ul li {
position: absolute;
 float: none;
display: none;
}

Dans ton html, la classe dropdown est mise sur une balise li et dans ton css sur la balise ul : "ul.dropdown"

ton hover est fait sur la balise li qui englobe ton sous-menu ul et non sur ta balise ul

#standard li > ul
{
   display: none;
}
#standard li:hover > ul
{
   display: block;
}

<div id="standard">
<ul>
                <h3>Toutes les news</h3>
                <img src="images/logo/desert.gif" alt="" /><br /><br />
                <br>

        <li class="dropdown"><a href=2012a.php#>2012
        <br>
        <br>
                <ul class="dropdown-vertical">
                                        <li><a href="dakar12a.php#">Rallye Dakar </a></li>

                                        <li><a href="silkway12a.php#">Rallye Silkway</a></li>

                                        <li><a href="maroc12a.php#">Rallye du Maroc</a></li>
                </ul>
        </li>

Là je suis perdu , je comprend que le hover doit se faire sur la balise li avec la class dropdown et que cela englobera la lu soit je modifie comme ci-dessous mais toujours pas d'affichage.

li.dropdown li > ul {
 min-height: 1px;
 line-height: 1.3em;
 vertical-align: middle;
 display: block;
}

li.dropdown li:hover > ul li {
 display: block;
}

Merci Yiujia,

Ah ça oui tu l'as dit, comme je fais cela pour le plaisir en auto-didact c'est pas évidant mais je vais essayer de trouver le temps de me remettre dedans.

En tous car, Merci beaucoup car je cumule pas mal d'heure perdu pour des bêtises qui sont si simple quand tu les expliques.

Bonne soirée

T'inquiètes pas, je suis en autodidacte depuis quelques mois aussi donc il m'arrive aussi de passer des heures sur un problème qui vient de petites erreurs . A plus.

Bonjour,

J'ai enfin mis en ligne mes modifications www.decre.org

J'ai toutefois encore un problème que je n'arrive pas a résoudre. Cela peut paraître stupide, mais j'ai beau essayer d'y tourner dans tous les sens, je n'y arrive pas.

Le menu vertical de gauche est déroulant et les listes de liens s'affichent au passage du curseur sur le titre. Seulement, vous pourrez constater que ça manque de visibilité car quand on passe sur un top menu "Saison2012" cela cache le top menu du dessous "2011". Et aussi l'autre inconvénient c'est que cela fait une grande page interminable. Est-ce que vous avez un guide, une aide a m'apporter afin de rendre le menu plus agréable au visiteur?

Merci d'avance.

genie a écrit :
vous pourrez constater que ça manque de visibilité car quand on passe sur un top menu "Saison2012" cela cache le top menu du dessous "2011"

Ca me le fait pas (ni sur Chorme ni sur FF)


Pour le problème de l'espace, le mieux serais d'abord de rapprocher chaque élément les un des autre. Déja en supprimant tous les <br> que ta mis.
Ensuite pour la nav du second niveau, au lieu de la faire apparaître en dessous, la faire apparaître sur le coter en appliquant un autre style au survol.

Merci Cancre quoi que c'est plutôt moi le cancre pourquoi faire compliquer quand on peut faire simple, j'allais chercher trop loin dans le css alors que c'était tous bêtement les retours à la ligne ;-( pouf je me sens nul

J'ai pour le moment testé qu'avec FF...

Comme je l'ai fait en deux temps (la 1ère en décembre, je me suis mélé les pinceaux...)

Bref, pour faire aller le sous-menu sur la droite, je me suis battue avec le code en décembre pour ça mais j'ai des compartiments et je n'arrive pas faire survoler les sous-menus par dessus le contenu de l'article, quand je le fais cela me fausse l'affichage ;-( et cela mange le contenu central.

Il faut les positionner en absolute et le parent en relatif.
En état normal mettre un left négatif et lors du survol du parent, un left auto ou positif.

Si le contenu passe toujours au dessus faudra rajouter des z-index

Merci pour ses précieux conseils.


ça me pause toutefois un autre problème. Le sous-menu se met bien à droite par-contre le menu(saison 2011) de dessous est inclus dans la liste.
J'ai ajouté le code, histoire que se soit plus compréhensible...

li.dropdown,
li.dropdown li,
li.dropdown ul {
list-style-type: none;
 margin: 0;
 padding: 0;
}

li.dropdown > ul {
 display: none;
}

li.dropdown:hover > ul {
 display: block;
}

li.dropdown ul ul {
 top: 1px;
 position: absolute; /*??*/
}

li.dropdown ul li {
 position: relative;
 float: right;
}

li.dropdown li > ul {
 min-height: 2px;
} 
 

Modifié par genie (01 Feb 2013 - 18:14)