以簡單的jquery垂直手風琴菜單爲特色，提供不同的子菜單字體

我有一個簡單的jquery垂直手風琴，並希望爲頂級和子菜單級鏈接使用不同的字體大小，顏色和權重。我沒有太多的運氣來改變CSS。我錯過了什麼？有沒有一種簡單的方法來做到這一點：以簡單的jquery垂直手風琴菜單爲特色，提供不同的子菜單字體

的html代碼：

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#nav > li > a').click(function(){ 
     if ($(this).attr('class') != 'active'){ 
      $('#nav li ul').slideUp(); 
      $(this).next().slideToggle(); 
      $('#nav li a').removeClass('active'); 
      $(this).addClass('active'); 
     } 
    }); 
}); 
</script> 
<style type="text/css"></style> 
</head> 
<body> 
    <ul id="nav"> 
    <li><a href="#">Item 1</a> 
     <ul> 
     <li><a href="#">Sub-Item 1 a</a></li> 
     <li><a href="#">Sub-Item 1 b</a></li> 
     <li><a href="#">Sub-Item 1 c</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Item 2</a> 
     <ul> 
     <li><a href="#">Sub-Item 2 a</a></li> 
     <li><a href="#">Sub-Item 2 b</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Item 3</a> 
     <ul> 
     <li><a href="#">Sub-Item 3 a</a></li> 
     <li><a href="#">Sub-Item 3 b</a></li> 
     <li><a href="#">Sub-Item 3 c</a></li> 
     <li><a href="#">Sub-Item 3 d</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Item 4</a> 
     <ul> 
     <li><a href="#">Sub-Item 4 a</a></li> 
     <li><a href="#">Sub-Item 4 b</a></li> 
     <li><a href="#">Sub-Item 4 c</a></li> 
     </ul> 
    </li> 
    </ul> 
</body>

，這裏是我的CSS代碼：

} 
#nav { 
float: left; 
width: 155px; 
border-top: 1px solid #999; 
border-right: 1px solid #999; 
border-left: 1px solid #999; 
} 
#nav li a { 
display: block; 
background: #ccc; 
border-top: 1px solid #eee; 
border-bottom: 1px solid #999; 
text-decoration: none; 
color: #000; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 11px; 
font-weight: bold; 
padding-top: 2px; 
padding-right: 3px; 
padding-bottom: 4px; 
padding-left: 3px; 
} 
#nav li a:hover, #nav li a.active { 
background: #999; 
color: #fff; 

} 
#nav li ul { 
display: none; // used to hide sub-menus 
} 
#nav li ul li a { 
background: #ececec; 
border-bottom: 1px dotted #ccc; 
padding-top: 2px; 
padding-right: 3px; 
padding-bottom: 4px; 
padding-left: 3px; 

}

任何啓發性的，這將非常感謝！

來源

2012-08-14 David Kneale

這應針對子菜單：

ul#nav li ul li { 
    /* some css here to change font etc */ 
}

或者爲目標的子菜單中的 'a' 標籤：

ul#nav li ul li a { 
    /* some css here to change font etc */ 
}

來源

2012-08-14 09:14:50

謝謝！針對「a」標籤完美運作。 – 2012-08-14 09:20:51

以簡單的jquery垂直手風琴菜單爲特色，提供不同的子菜單字體

回答

相關問題