[Résolu]Problème de menu CSS

[aurels]

Bonjour,

J'ai une question concernant le menu du gabarit Horizontal-Dropdown (je suis pas expert en CSS) : le menu horizontal en cascade me convient très bien, mais mon client préférerait (et moi aussi) qu'il n'y ait pas la répétition du fond bleu à côté des boutons...

Je m'explique mal : voilà une capture du menu actuel :



et voilà le code du CSS (le bleu clair étant le nav_bg.jpg et le bleu foncé étant le nav_hover_bg.jpg) :

Code: Select all

/* NAV */

    * html div#menu_horiz {
        /* hide ie/mac \*/
        height: 1%;
        /* end hide */
    }
    div#menu_horiz {
      width: 780px;
      margin: 0;
      text-align: center;
      border-right: solid 1px #cccccc;
    }
    div#menu_horiz ul {    
        margin: 0;
        padding: 0;
        list-style: none;
        border-left:  1px solid #C0C0C0;
        
div#menu_horiz ul li {
      background-color: #000;
       
    }
    div#menu_horiz li {
        float: left;
        display: inline;
        list-style: none;
        margin: 0 ;
        border-right: 1px solid #C0C0C0;

}


    }
    div#menu_horiz li a {
        border-right: none;
    }
    div#menu_horiz a,
    div#menu_horiz a:link,
    div#menu_horiz a:active,
    div#menu_horiz a:visited {
        display: block;
        padding: 5px 10px; 

        /* hide from ie/mac \*/
        display: block;
        /* end hide */
        background:  url(uploads/Horizontal_dropdown/nav_bg.jpg) repeat 0 0px; 
        text-decoration: none;
        margin: 0;
        color: #fff;
        /*background: #006AB3;*/
         font-weight: bold;
    }
div#menu_horiz li a:hover {
        background:  url(uploads/Horizontal_dropdown/nav_hover_bg.jpg) repeat 0 0px;
	background-color: #87A6BA;
        color: #FFF;
        line-height: 1em;
        font-weight: bold;
}
    div#menu_horiz .activeparent {
        display: inline-block;

        /* hide from ie/mac \*/
        display: block;
        /* end hide */
        
	background-color: #87A6BA;
    }

    div#menu_horiz .current a,
    div#menu_horiz .current a:link,
    div#menu_horiz .current a:active,
    div#menu_horiz .current a:visited,
    div#menu_horiz .current a:hover,
    div#menu_horiz .activeparent a,
    div#menu_horiz .activeparent a:link,
    div#menu_horiz .activeparent a:active,
    div#menu_horiz .activeparent a:visited,
    div#menu_horiz .activeparent a:hover 
{
	background-color: #87A6BA;
    }
/* END NAV */

div#menu_horiz li.active01 h3 {
        display: inline-block;
        padding: 5px 10px; 
        background:  url(uploads/Horizontal_dropdown/nav_hover_bg.jpg) repeat 0 0px;
        /* hide from ie/mac \*/
        display: block;
        /* end hide */
        font-size: 1em;
        line-height: 1em;
        text-decoration: none;
        margin: 0;
        color: #ffffff;
        background-color: #87A6BA;
    }

#menu_horiz li.active02 h3 {
  display: block;
  text-decoration: none;
  padding: 5px 5px 5px 10px;
  font-weight: normal;
  color: #18507C;
  margin: 0;
  font-size: 1em;
  background-color: #87A6BA;
  }

#menu_horiz li.active03 h3
{
  display: block;
  padding: 3px 5px 3px 25px;
  border-bottom: none;
  font-size: 90%;
  font-weight: bold;
  color: #87A6BA;
  margin: 0;
}

Je voudrais que le bleu foncé n'apparaisse pas comme ça en continu à côté du sous-menu, comme sur le screenshot. Quelle ligne modifier et comment ?

Merci de votre aide urgente !

[Pierre M.]

Bonjour aurels,

si j'ai bien compris, si ce fond en trop à droite en deuxième ligne est dû à un grand nombre d'option de menu qui ne peut pas tenir sur une ligne, on se rapproche de cette discussion http://forum.cmsmadesimple.org/index.ph ... 785.0.html non ?
Le souci, si le menu est (dans un ul) dans un div, c'est que généralement les div prennent la largeur de leur plus grande "ligne". Il faut vraiment un costaud en CSS pour décoincer ça.

Pierre M.