2011-04-08 115 views
0

我修改了style.css中的导航风格。我想修改下拉菜单。我为主菜单添加了一个图像。当鼠标悬停在菜单上时,它将变为悬停图像。但是当我想要将鼠标悬停在子菜单上时存在问题,父菜单(主菜单)不会保留这些悬停图像,而是在悬停前回到图像。 您可以在此链接预览网站http://alfo.com.my/default/about/company-background/wordpress导航问题

我希望我能得到解决方案。

下面是修改的样式下拉的编码:

/*========Navi========*/ 
ul#menu-alfo { 
    list-style: none; 
    } 
    ul#menu-alfo li { 
     display: inline; 

    } 
    ul#menu-alfo li a { 
     text-indent: -9999px; 
     display: block; 
     float: left; 
     } 
     ul#menu-alfo li.menu-item-87 a{ 
      background: url(images/navi.png) no-repeat bottom center; 
      width: 118px;  height: 38px; 
      } 
     ul#menu-alfo li.menu-item-86 a{ 
      background: url(images/navi-02.png) no-repeat bottom center; 
      width: 101px;  height: 38px; 
     } 
     ul#menu-alfo li.menu-item-84 a{ 
      background: url(images/navi-03.png) no-repeat bottom center; 
      width: 127px;  height: 38px; 
     } 
     ul#menu-alfo li.menu-item-83 a{ 
      background: url(images/navi-04.png) no-repeat bottom center; 
      width: 116px;  height: 38px; 
     } 
     ul#menu-alfo li.menu-item-85 a{ 
      background: url(images/navi-05.png) no-repeat bottom center; 
      width: 111px;  height: 38px; 
      } 

      ul#menu-alfo li.menu-item-87 a:hover, ul#menu-alfo li.menu-item-87 a:active, 
      ul#menu-alfo li.menu-item-86 a:hover, ul#menu-alfo li.menu-item-86 a:active, 
      ul#menu-alfo li.menu-item-84 a:hover, ul#menu-alfo li.menu-item-84 a:active, 
      ul#menu-alfo li.menu-item-83 a:hover, ul#menu-alfo li.menu-item-83 a:active, 
      ul#menu-alfo li.menu-item-85 a:hover, ul#menu-alfo li.menu-item-85 a:active, 
      body.page-id-50 ul#menu-alfo li.menu-item-87, 
      body.page-id-56 ul#menu-alfo li.menu-item-86, 
      body.page-id-58 ul#menu-alfo li.menu-item-84, 
      body.page-id-31 ul#menu-alfo li.menu-item-83, 
      body.page-id-52 ul#menu-alfo li.menu-item-85, 
      body.single ul#menu-alfo li.menu-item-87{ 
       background-position: top center; 
      } 
      ul#menu-alfo ul.sub-menu li { 
       margin-left:10px; 
       height:13px; 
       padding: 6px 0px; 


      } 
      ul#menu-alfo ul.sub-menu li a:hover { 
       margin-left:1px; 
       height:13px!important; 


      }    
     ul#menu-alfo ul.sub-menu li a{ 
    background: none repeat scroll 0 0 transparent; 
    color: #000000; 
    font: bold 13px Arial; 
    min-width: 170px; 
    padding: 5px 10px; 
    text-decoration: none; 
    text-indent: inherit; 
     } 

     ul#menu-alfo ul.sub-menu a:hover{ 
      color:#565BBA !important; 

     } 

     #menu-alfo .menu-header, 
div.menu { 
    font-size: 13px; 
    margin-left: 12px; 
    width: 988px; 
} 
#menu-alfo .menu-header ul, 
div.menu ul { 
    list-style: none; 
    margin: 0 0 0 -17px; 
} 
#menu-alfo .menu-header li, 
div.menu li { 
    float: left; 
    position: relative; 
} 

#menu-alfo ul ul{background:#fff;} 

#menu-alfo ul ul li { 

    background-position: top center; 

} 
#menu-alfo ul ul li a{ 

color: #FFF; 
font-size:12px; 
font-weight:bold; 

} 
#menu-alfo li:hover a, 
#menu-alfo ul ul :hover a { 
    background-position: top center; 

} 

#menu-alfo ul ul li:hover a, 
#menu-alfo ul ul :hover a { 

    background-position: top center; 

} 

#menu-alfo ul ul li:hover a, 
#menu-alfo ul ul :hover a { 

background-position: top center; 


} 
#menu-alfo ul li:hover ul { 
    display: block; 
} 



ul#menu-alfo li.current_page_item a, 
ul#menu-alfo li.current-menu-ancestor a, 
ul#menu-alfo li.current-menu-item a, 
ul#menu-alfo li.current-menu-parent a { 

    background-position: top center; 
    padding:0; 
} 
ul#menu-alfo li.current_page_item a, 
ul#menu-alfo li.current-page-menu-ancestor a, 
ul#menu-alfo li.current-page-menu-item a, 
ul#menu-alfo li.current-menu-parent a { 

    background-position: top center; 
    padding:0; 
} 
ul#menu-alfo li.current-page-ancestor a { 

    background-position: top center; 
    padding:0; 
} 

#menu-alfo ul ul li.current_page_item a, 
#menu-alfo ul ul li.current-menu-ancestor a, 
#menu-alfo ul ul li.current-menu-item a, 
#menu-alfo ul ul li.current-menu-parent a { 
    background-position: top center;  
    padding:0; 
} 

#menu-alfo li.current_page_item a:hover {background-position: top center;} 
#menu-alfo li.current_page_parent ul li a:hover {background-position: top center;} 

* html #menu-alfo ul li.current_page_item a, 
* html #menu-alfo ul li.current-menu-ancestor a, 
* html #menu-alfo ul li.current-menu-item a, 
* html #menu-alfo ul li.current-menu-parent a, 
* html #menu-alfo ul li a:hover { 
    background-position: top center; 
    padding:0; 
} 


/*=====end navi=====*/ 

/* =Menu 
-------------------------------------------------------------- */ 

#access { 

    display: block; 
    float: left; 
    margin: 0 auto; 
    width: 600px; 
} 
#access .menu-header, 
div.menu { 
    font-size: 13px; 
    margin-left: 12px; 
    width: 928px; 
} 
#access .menu-header ul, 
div.menu ul { 
    list-style: none; 
    margin: 0; 
} 
#access .menu-header li, 
div.menu li { 
    float: left; 
    position: relative; 
} 

#access ul ul { 
    box-shadow: 0px 3px 3px rgba(0,0,0,0.2); 
    -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); 
    display: none; 
    position: absolute; 
    top: 38px; 
    left: 0; 
    float: left; 
    width: 180px; 
    z-index: 99999; 
} 
#access ul li.menu-item-87 ul { /*-----Dropdown with diffrent height------- */ 
    background:url(images/bgmenu1.png); 
    width:200px; 
    height:130px; 
} 
#access ul li.menu-item-85 ul{ /*-----Dropdown with diffrent height------- */ 
    background:url(images/bgmenu2.png); 
    width:200px; 
    height:170px; 
} 
#access ul ul ul { 
    left: 100%; 
    top: 0; 
} 
#access ul ul a { 

} 
#access li:hover > a, 
#access ul ul :hover > a { 
    background: #333; 
    color: #fff; 
} 
#access ul li:hover > ul { 
    display: block; 
} 
#access ul li.current_page_item > a, 
#access ul li.current-menu-ancestor > a, 
#access ul li.current-menu-item > a, 
#access ul li.current-menu-parent > a { 
    color: #fff; 
} 
* html #access ul li.current_page_item a, 
* html #access ul li.current-menu-ancestor a, 
* html #access ul li.current-menu-item a, 
* html #access ul li.current-menu-parent a, 
* html #access ul li a:hover { 
    color: #fff; 
} 

回答

0

我首先想到的是:我们能否找到一种方法,使用CSS时,不同的元素悬停改变一个元素的样式。我认为答案是'不'。

那么我们需要考虑解决方法。可能最直接的方法是在子菜单的背景图像中包含发光菜单项。这意味着每个子菜单都会有不同的图形,并且会对定位等进行一些更改。几乎肯定会有其他问题需要进行规划。正如你所看到的,我没有完全想到这一点,所以请以此为出发点,而不是完美的计划。

事实上,您可能会得出这样的结论:这不值得为相对较小的收益付出努力。你的选择。

祝你好运!