Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Drop down menu won’t behave

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • September 2, 2009 at 5:13 pm #25974
    OlivierLabbe
    Member

    i’m doing a website with a special horizontal drop down menu…

    since monday I only work on THIS VERY PROBLEM, i’m about to do this in flash only but I hate flash!

    since it’s been done by an external design firm, they’ve done some too-much-graphic-for-css template.

    i’ve done most of the design but the horizontal dropdown menu (in css based on http://www.sohtanaka.com/web-design/hor … ss-jquery/ )

    problem is, all the menu (main and sub) is done using images, and when we are on the submenu, the main menu won’t stay in "hover" state.

    check this : http://cochon.xagone.com/fr/accueil.html
    it’s in french, but dont bother, it’s not a problem to see the css…

    the html code is

    Code:

    and the css

    Code:
    .menu_principal {
    float: right;
    height: 79px;
    padding-top: 31px;
    position: relative;
    z-index: auto;
    left: -20px;
    }

    .logo_cochon {
    width:218px;
    height: 110px;
    }

    /* Bouton 1 menu */
    .menu1 {
    height: 79px;
    width: 134px;
    }
    ul.avmenu_princ1 {
    list-style:none;
    margin: 0px;
    padding: 0px;
    float: left;
    }
    ul.avmenu_princ1 li {
    padding:0;
    display: inline;
    }
    ul.avmenu_princ1 li a:link {
    float:left;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    display: block;
    background-image: url(/images/menu/menu_principale/aumenu.jpg);
    background-repeat: no-repeat;
    }
    ul.avmenu_princ1 li a:visited {
    float:left;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    background-image: url(/images/menu/menu_principale/aumenu.jpg);
    background-repeat: no-repeat;
    }
    ul.avmenu_princ1 li a:hover, ul.avmenu_princ1 li a.current {
    float:left;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    background-image: url(/images/menu/menu_prin_over/aumenu_over.jpg);
    background-repeat: no-repeat;
    }
    ul.avmenu_princ1 li span {
    float: none;
    position:absolute;
    left: 1px;
    top:100px;
    display: none;
    padding-top: 8px;
    padding-right: 0;
    padding-bottom: 0px;
    padding-left: 0;
    height: 50px;
    margin: 0px;
    }
    ul.avmenu_princ1 li:hover span { display: block;
    }
    ul.avmenu_princ1 li a.jour:link {
    display: inline;
    background-image: url(/images/menu/menudujour.png);
    background-repeat: no-repeat;
    height: 52px;
    width: 126px;
    }
    ul.avmenu_princ1 li a.jour:visited {
    display: inline;
    background-image: url(/images/menu/menudujour.png);
    background-repeat: no-repeat;
    height: 52px;
    width: 126px;
    }
    ul.avmenu_princ1 li a.jour:hover, active {
    display: inline;
    background-image: url(/images/menu/sousmenu_menu_over_jour.png);
    background-repeat: no-repeat;
    height: 52px;
    width: 126px;
    }
    ul.avmenu_princ1 li a.cochon:link {
    display: inline;
    background-image: url(/images/menu/menucochon.png);
    background-repeat: no-repeat;
    height: 52px;
    width: 121px;
    }
    ul.avmenu_princ1 li a.cochon:visited {
    display: inline;
    background-image: url(/images/menu/menucochon.png);
    background-repeat: no-repeat;
    height: 52px;
    width: 121px;
    }
    ul.avmenu_princ1 li a.cochon:hover, active {
    display: inline;
    background-image: url(/images/menu/sousmenu_menu_overcochon.png);
    background-repeat: no-repeat;
    height: 52px;
    width: 121px;
    }
    ul.avmenu_princ1 li a.matincochon:link {
    display: inline;
    background-image: url(/images/menu/matincochon.png);
    background-repeat: no-repeat;
    height: 52px;
    width: 124px;
    }
    ul.avmenu_princ1 li a.matincochon:visited {
    display: inline;
    background-image: url(/images/menu/matincochon.png);
    background-repeat: no-repeat;
    height: 52px;
    width: 124px;
    }
    ul.avmenu_princ1 li a.matincochon:hover, active {
    display: inline;
    background-image: url(/images/menu/sousmenu_menu_over_matin.png);
    background-repeat: no-repeat;
    height: 52px;
    width: 124px;
    }
    ul.avmenu_princ1 li a.vin:link {
    display: inline;
    background-image: url(/images/menu/cartedesvins.png);
    background-repeat: no-repeat;
    height: 52px;
    width: 131px;
    }
    ul.avmenu_princ1 li a.vin:visited {
    display: inline;
    background-image: url(/images/menu/cartedesvins.png);
    background-repeat: no-repeat;
    height: 52px;
    width: 131px;
    }
    ul.avmenu_princ1 li a.vin:hover, active {
    display: inline;
    background-image: url(/images/menu/sousmenu_menu_over_vin.png);
    background-repeat: no-repeat;
    height: 52px;
    width: 131px;
    }
    ul.avmenu_princ1 li a.enfants:link {
    display: inline;
    background-image: url(/images/menu/menuenfants.png);
    background-repeat: no-repeat;
    height: 52px;
    width: 127px;
    }
    ul.avmenu_princ1 li a.enfants:visited {
    display: inline;
    background-image: url(/images/menu/menuenfants.png);
    background-repeat: no-repeat;
    height: 52px;
    width: 127px;
    }
    ul.avmenu_princ1 li a.enfants:hover, active {
    display: inline;
    background-image: url(/images/menu/sousmenu_menu_over_enf.png);
    background-repeat: no-repeat;
    height: 52px;
    width: 127px;
    }
    /* Bouton 2 La Promo */
    .promo2 {
    height: 79px;
    width: 145px;
    }
    ul.avmenu_princ2 {
    list-style:none;
    margin: 0px;
    padding: 0px;
    float: left;
    display: block;
    }
    ul.avmenu_princ2 li {
    padding:0;
    display: inline;
    }
    ul.avmenu_princ2 li a:link {
    float:left;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    background-image: url(/images/menu/menu_principale/lapromo.jpg);
    background-repeat: no-repeat;
    }
    ul.avmenu_princ2 li a:visited {
    float:left;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    background-image: url(/images/menu/menu_principale/lapromo.jpg);
    background-repeat: no-repeat;
    }
    ul.avmenu_princ2 li a:hover, ul.avmenu li a.current {
    float:left;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    background-image: url(/images/menu/menu_prin_over/lapromo_over.jpg);
    background-repeat: no-repeat;
    }

    /* Bouton 3 Très cochon */
    .trescochon3 {
    height: 79px;
    width: 170px;
    }
    ul.avmenu_princ3 {
    list-style:none;
    margin: 0px;
    padding: 0px;
    float: left;
    display: block;
    }
    ul.avmenu_princ3 li {
    padding:0;
    display: inline;
    }
    ul.avmenu_princ3 li a:link {
    float:left;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    background-image: url(/images/menu/menu_principale/trescochon.jpg);
    background-repeat: no-repeat;
    }
    ul.avmenu_princ3 li a:visited {
    float:left;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    background-image: url(/images/menu/menu_principale/trescochon.jpg);
    background-repeat: no-repeat;
    }
    ul.avmenu_princ3 li a:hover, ul.avmenu li a.current {
    float:left;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    background-image: url(/images/menu/menu_prin_over/trescochon_over.jpg);
    background-repeat: no-repeat;
    }
    ul.avmenu_princ3 li span {
    float: none;
    position:absolute;
    left: -126px;
    top:100px;
    display: none;
    padding-top: 8px;
    padding-right: 0;
    padding-bottom: 0px;
    padding-left: 0;
    height: 50px;
    margin: 0px;
    }
    ul.avmenu_princ3 li:hover span { display: block;
    }
    ul.avmenu_princ3 li a.debut:link {
    display: inline;
    background-image: url(/images/menu/s_menu_trescochon_debut.png);
    background-repeat: no-repeat;
    height: 52px;
    width: 147px;
    }
    ul.avmenu_princ3 li a.debut:visited {
    display: inline;
    background-image: url(/images/menu/s_menu_trescochon_debut.png);
    background-repeat: no-repeat;
    height: 52px;
    width: 147px;
    }
    ul.avmenu_princ3 li a.debut:hover, active {
    display: inline;
    background-image: url(/images/menu/s_menu_tresco_over_debut.png);
    background-repeat: no-repeat;
    height: 52px;
    width: 147px;
    }
    ul.avmenu_princ3 li a.saillants:link {
    display: inline;
    background-image: url(/images/menu/s_menu_trescochon_saillant.png);
    background-repeat: no-repeat;
    height: 52px;
    width: 136px;
    }
    ul.avmenu_princ3 li a.saillants:visited {
    display: inline;
    background-image: url(/images/menu/s_menu_trescochon_saillant.png);
    background-repeat: no-repeat;
    height: 52px;
    width: 136px;
    }
    ul.avmenu_princ3 li a.saillants:hover, active {
    display: inline;
    background-image: url(/images/menu/s_menu_tresco_over_saillant.png);
    background-repeat: no-repeat;
    height: 52px;
    width: 136px;
    }
    ul.avmenu_princ3 li a.opinions:link {
    display: inline;
    background-image: url(/images/menu/s_menu_trescochon_opinions.png);
    background-repeat: no-repeat;
    height: 52px;
    width: 131px;
    }
    ul.avmenu_princ3 li a.opinions:visited {
    display: inline;
    background-image: url(/images/menu/s_menu_trescochon_opinions.png);
    background-repeat: no-repeat;
    height: 52px;
    width: 131px;
    }
    ul.avmenu_princ3 li a.opinions:hover, active {
    display: inline;
    background-image: url(/images/menu/s_menu_tresco_over_opinions.png);
    background-repeat: no-repeat;
    height: 52px;
    width: 131px;
    }
    ul.avmenu_princ3 li a.prix:link {
    display: inline;
    background-image: url(/images/menu/s_menu_trescochon_prix.png);
    background-repeat: no-repeat;
    height: 52px;
    width: 148px;
    }
    ul.avmenu_princ3 li a.prix:visited {
    display: inline;
    background-image: url(/images/menu/s_menu_trescochon_prix.png);
    background-repeat: no-repeat;
    height: 52px;
    width: 148px;
    }
    ul.avmenu_princ3 li a.prix:hover, active {
    display: inline;
    background-image: url(/images/menu/s_menu_tresco_over_prix.png);
    background-repeat: no-repeat;
    height: 52px;
    width: 148px;
    }
    /* Bouton 4 Pour voir */
    .pourvoir4 {
    height: 79px;
    width: 152px;
    }
    ul.avmenu_princ4 {
    list-style:none;
    margin: 0px;
    padding: 0px;
    float: left;
    display: block;
    }
    ul.avmenu_princ4 li {
    padding:0;
    display: inline;
    }
    ul.avmenu_princ4 li a:link {
    float:left;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    background-image: url(/images/menu/menu_principale/pourvoir.jpg);
    background-repeat: no-repeat;
    }
    ul.avmenu_princ4 li a:visited {
    float:left;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    background-image: url(/images/menu/menu_principale/pourvoir.jpg);
    background-repeat: no-repeat;
    }
    ul.avmenu_princ4 li a:hover, ul.avmenu li a.current {
    float:left;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    background-image: url(/images/menu/menu_prin_over/pourvoir_over.jpg);
    background-repeat: no-repeat;
    }

    /* Bouton 5 On est ici */
    .onestici5 {
    height: 79px;
    width: 130px;
    }
    ul.avmenu_princ5 {
    list-style:none;
    margin: 0px;
    padding: 0px;
    float: left;
    display: block;
    }
    ul.avmenu_princ5 li {
    padding:0;
    display: inline;
    }
    ul.avmenu_princ5 li a:link {
    float:left;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    background-image: url(/images/menu/menu_principale/onestici.jpg);
    background-repeat: no-repeat;
    }
    ul.avmenu_princ5 li a:visited {
    float:left;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    background-image: url(/images/menu/menu_principale/onestici.jpg);
    background-repeat: no-repeat;
    }
    ul.avmenu_princ5 li a:hover, ul.avmenu li a.current {
    float:left;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    background-image: url(/images/menu/menu_prin_over/onestici_over.jpg);
    background-repeat: no-repeat;
    }
    /* Menu CENTRALE_ROLLOVER */
    /* Champlain */
    .champlain {
    height: 91px;
    width: 174px;
    }
    ul.avmenu_champlain1 {
    list-style:none;
    margin: 0px;
    padding: 0px;
    float: left;
    display: block;
    }
    ul.avmenu_champlain1 li {
    padding:0;
    display: inline;
    }
    ul.avmenu_champlain1 li a:link {
    float:left;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 1px;
    margin-bottom: 0px;
    margin-left: 52px;
    padding-top: 0px;
    background-image: url(/images/menu/btn/champlain.png);
    background-repeat: no-repeat;
    }
    ul.avmenu_champlain1 li a:visited {
    float:left;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 1px;
    margin-bottom: 0px;
    margin-left: 52px;
    padding-top: 0px;
    background-image: url(/images/menu/btn/champlain.png);
    background-repeat: no-repeat;
    }
    ul.avmenu_champlain1 li a:hover, ul.avmenu_champlain1 li a.current {
    float:left;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 1px;
    margin-bottom: 0px;
    margin-left: 52px;
    padding-top: 0px;
    background-image: url(/images/menu/btn_over/champlain_over.jpg);
    background-repeat: no-repeat;
    }
    /* René-Lévesques */
    .renel {
    height: 91px;
    width: 172px;
    }
    ul.avmenu_renel1 {
    list-style:none;
    margin: 0px;
    padding: 0px;
    float: left;
    display: block;
    }
    ul.avmenu_renel1 li {
    padding:0;
    display: inline;
    }
    ul.avmenu_renel1 li a:link {
    float:left;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 1px;
    margin-bottom: 0px;
    margin-left: 1px;
    padding-top: 0px;
    background-image: url(/images/menu/btn/renelevesque.png);
    background-repeat: no-repeat;
    }
    ul.avmenu_renel1 li a:visited {
    float:left;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 1px;
    margin-bottom: 0px;
    margin-left: 1px;
    padding-top: 0px;
    background-image: url(/images/menu/btn/renelevesque.png);
    background-repeat: no-repeat;
    }
    ul.avmenu_renel1 li a:hover, ul.avmenu_renel1 li a.current {
    float:left;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 1px;
    margin-bottom: 0px;
    margin-left: 1px;
    padding-top: 0px;
    background-image: url(/images/menu/btn_over/rene_over.jpg);
    background-repeat: no-repeat;
    }
    /* Maguire */
    .maguire {
    height: 90px;
    width: 172px;
    }
    ul.avmenu_maguire1 {
    list-style:none;
    margin: 0px;
    padding: 0px;
    float: left;
    display: block;
    }
    ul.avmenu_maguire1 li {
    padding:0;
    display: inline;
    }
    ul.avmenu_maguire1 li a:link {
    float:left;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 1px;
    margin-bottom: 0px;
    margin-left: 1px;
    padding-top: 0px;
    background-image: url(/images/menu/btn/maguire.png);
    background-repeat: no-repeat;
    }
    ul.avmenu_maguire1 li a:visited {
    float:left;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 1px;
    margin-bottom: 0px;
    margin-left: 1px;
    padding-top: 0px;
    background-image: url(/images/menu/btn/maguire.png);
    background-repeat: no-repeat;
    }
    ul.avmenu_maguire1 li a:hover, ul.avmenu_renel1 li a.current {
    float:left;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 1px;
    margin-bottom: 0px;
    margin-left: 1px;
    padding-top: 0px;
    background-image: url(/images/menu/btn_over/maguire_over.jpg);
    background-repeat: no-repeat;
    }
    /* Lebourneuf */
    .lebour {
    height: 91px;
    width: 172px;
    }
    ul.avmenu_lebour1 {
    list-style:none;
    margin: 0px;
    padding: 0px;
    float: left;
    display: block;
    }
    ul.avmenu_lebour1 li {
    padding:0;
    display: inline;
    }
    ul.avmenu_lebour1 li a:link {
    float:left;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 1px;
    padding-top: 0px;
    background-image: url(/images/menu/btn/lebourneuf.png);
    background-repeat: no-repeat;
    }
    ul.avmenu_lebour1 li a:visited {
    float:left;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 1px;
    padding-top: 0px;
    background-image: url(/images/menu/btn/lebourneuf.png);
    background-repeat: no-repeat;
    }
    ul.avmenu_lebour1 li a:hover, ul.avmenu_lebour1 li a.current {
    float:left;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 1px;
    padding-top: 0px;
    background-image: url(/images/menu/btn_over/lebour_over.jpg);
    background-repeat: no-repeat;
    }
    /* Menu_CENTRALE */

    ok.. it’s a LOT of css so i’ll point you the first menu with the hover state :

    Code:
    ul.avmenu_princ1 {
    list-style:none;
    margin: 0px;
    padding: 0px;
    float: left;
    }
    ul.avmenu_princ1 li {
    padding:0;
    display: inline;
    }
    ul.avmenu_princ1 li a:link {
    float:left;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    display: block;
    background-image: url(/images/menu/menu_principale/aumenu.jpg);
    background-repeat: no-repeat;
    }
    ul.avmenu_princ1 li a:visited {
    float:left;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    background-image: url(/images/menu/menu_principale/aumenu.jpg);
    background-repeat: no-repeat;
    }
    ul.avmenu_princ1 li a:hover, ul.avmenu_princ1 li a.current {
    float:left;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    background-image: url(/images/menu/menu_prin_over/aumenu_over.jpg);
    background-repeat: no-repeat;
    }
    ul.avmenu_princ1 li span {
    float: none;
    position:absolute;
    left: 1px;
    top:100px;
    display: none;
    padding-top: 8px;
    padding-right: 0;
    padding-bottom: 0px;
    padding-left: 0;
    height: 50px;
    margin: 0px;
    }
    ul.avmenu_princ1 li:hover span { display: block;
    }
    September 2, 2009 at 6:21 pm #63119
    OlivierLabbe
    Member

    i decided to go with javascript change srce image

    i’ve make a spacer, place it in the menu, when in the submenu it change in javascript the source of the spacer img.

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.