水平導航欄，使用圖像的水平第二層

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屬性，這樣它就不會混淆你的格式。