2014-03-26 189 views
1

我有一個菜單,其中每個菜單項都有一個背景圖像,當將鼠標懸停在菜單項上時,通過滾動相應的背景圖像來加下劃線。現在我還想顯示子菜單(帶有文本項目,沒有背景圖像),但是子菜單文本沒有顯示,如果我設置子菜單的邊框,我可以看到沒有適當內容的矩形。我沒有看到代碼有什麼問題,請幫我糾正(並改進)它。菜單項懸停的Css顯示子菜單

// HTML結構

<div id="menu_top"> 
      <ul id="menu"> 
       <li class="home"><a href="#" class="home">Home</a></li> 
       <li class="menu"><a href="#" class="menu">Menu</a> 
        <ul class="submenu"> 
          <li>item1</li> 
          <li>item2</li> 
          <li>item3</li> 
        </ul> 
       </li> 
       <li class="contact"><a href="#" class="contact">Contacts</a></li> 
       <li class="about"><a href="#" class="about">About</a></li> 
      </ul> 
     </div> 

// CSS樣式

#menu_top 
{ 
    margin: 0 auto; 
    text-align: center; 
    background: url(../images/nav-bg.jpg) no-repeat 0 0; 
    height: 150px; 
     width: 815px; 
} 

ul#menu 
{ 
    list-style: none; 
    margin: 0; 
    position: relative; 
} 

ul#menu li 
{ 
    background-position: left top; 
    background-repeat: no-repeat; 
    display: block; 
    text-indent: -9000px; 
    position: absolute; 
    outline: none; 
} 

/*Menu items*/ 

// all menu items similar to this ... 

ul#menu li.menu 
{ 
    background-image: url(../images/nav-menu.png); 
    height: 50px; 
    width: 116px; 
    top: 30px; 
    left: 380px; 
} 


/* underline menu items*/ 
ul#menu li:hover 
{ 
    background-position: left bottom; 
} 

#menu >li ul 
{ 
    position:absolute; 
    left:0px; 
    top:50px; 
    width:100%; 
} 

#menu >li ul>li 
{ 
    list-style:none; 
} 

#menu >li:hover > ul 
{ 
    display:block; 
} 
+0

請http://jsfiddle.net – ShibinRagh

+0

你們是不是要做到這一點http://jsfiddle.net/WJ876/ – ShibinRagh

回答

2

不被顯示的子菜單項,因爲你設置了一個text-indent:-9000pxul#menu li,這意味着文本縮進將適用到ul #menu下的所有li項目。要顯示的子菜單項應用以下樣式子菜單裏

#menu >li ul>li 
{ 
    list-style:none; 
    text-indent:0; 
    position:relative; // this is set to remove position absolute set for ul#menu li 
} 

OR

#menu .submenu li{ 
    position:relative; 
    text-indent:0; 
} 
+0

謝謝,那正是我想要的 –