水平导航栏，使用图像的水平第二层

Question

有人可以请推荐水平导航栏，使用图像的水平第二层。当用户将鼠标悬停在图像上时，鼠标悬停在图像上。

与此类似的东西.... http：//www.sohtanaka.com/web-design/horizo​​ntal-sub-nav-with-css-jquery/但使用图像。

我开始在这方面工作，并已相当远，但由于我用二级导航栏的图像，我只能让我的图像显示为垂直，而不是水平。

我知道违规的类是下面这个，当辅助导航设置为水平。当我添加不同的类... boyLink和girlLink到标签时，它开始显示垂直。我不确定是否应该添加boyLink和girlLink到ul＃topnav li span？
：
/--Show subnav on hover--/ ul#topnav li span a { display: inline; }

ul#topnav { margin: 0; padding: 0; float: left; width: 970px; list-style: none; position: relative; font-size: 1.2em; }

ul#topnav li 
    { 
     float: left; 
     margin: 0; 
     padding: 0; 
     background-color: Red; 
    } 

    ul#topnav li a 
    { 
     padding: 0px 0px 0px 0px; 
     margin: 0px; 
     display: block; 
     text-decoration: none; 
    } 


    ul#topnav li span 
    { 
     float: left; 
     margin: 0; 
     padding: 0; 
     position: absolute; 
     left: 0; 
     top: 25px; 
     display: none; /*--Hide by default--*/ 
     width: 970px; 
    } 

    ul#topnav li:hover span 
    { 
     display: block; 
    }  


    /*--Show subnav on hover--*/ 
    ul#topnav li span a 
    { 
     display: inline; 
     float:left; 
    } 


    /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/ 
    ul#topnav li span a:hover 
    { 
     text-decoration: underline; 
     display: inline; 
    } 

    img 
    { 
     border: none; 
    } 

    ul#topnav li #homeLink 
    { 
     width: 51px; 
     height: 25px; 
     display: block; 
     background-repeat: no-repeat; 
     background-image: url("Content/Images/Nav/nav01U.jpg"); 
    } 

    ul#topnav li:hover #homeLink:hover 
    { 
     background-image: url("Content/Images/Nav/nav01.jpg"); 
    } 

    ul#topnav li #collectionLink 
    { 
     width: 97px; 
     height: 25px; 
     display: block; 
     background-repeat: no-repeat; 
     background-image: url("Content/Images/Nav/nav02U.jpg"); 
    } 

    ul#topnav li:hover #collectionLink:hover 
    { 
     background-image: url("Content/Images/Nav/nav02.jpg"); 
    }  


    ul#topnav li:hover #contactUsLink:hover 
    { 
     background-image: url("Content/Images/Nav/nav06.jpg"); 
    } 

    ul#topnav li:hover span .girlLink 
    { 
     width: 38px; 
     height: 31px; 
     display: block; 
     background-repeat: no-repeat; 
     background-image: url("Content/Images/Nav/snav01U.jpg"); 
    } 

    ul#topnav li:hover span .girlLink:hover 
    { 
     background-image: url("Content/Images/Nav/snav01.jpg"); 
    } 



    ul#topnav li:hover span .boyLink 
    { 
     width: 37px; 
     height: 31px; 
     display: block; 
     font-size: 10px; 
     text-decoration: none; 
     background-repeat: no-repeat; 
     background-image: url("Content/Images/Nav/snav02U.jpg"); 
    } 

    ul#topnav li:hover span .boyLink:hover 
    { 
     background-image: url("Content/Images/Nav/snav02.jpg"); 
    } 



</style> 

HTML代码

<li> 
     <a href="collection.aspx" id="collectionLink">&nbsp; </a> 

     <!--Subnav Starts Here--> 
     <span> 
      <a href="girl.aspx" class="girlLink">&nbsp; </a> 
      <a href="boy.aspx" class="boyLink">&nbsp; </a> 
     </span> 
     <!--Subnav Ends Here--> 

    </li> 

</ul> 

Answer 1

如果您更改a的显示：inline to float：left将会起作用。

Answer 2

你并不需要JavaScript才能做任何鼠标悬停图片更多：

a:link { /* normal stuffs */ } 
a:hover { /* "mouseover" stuffs */ } 

至于结构， 一世没有看到你发布在我的结尾的CSS的任何问题......也许你正试图把一个img标签放在锚点：这是一个坏主意。你应该加载一个图像作为背景css属性，这样它就不会混淆你的格式。