如何製作下拉菜單？

Question

使用CSS樣式表

我有按鈕圖像，我想在我的網頁菜單

添加一個按鈕圖像。例如

Home   Contact 
->Aboutus  -> Location 

Home, Contact (menu) 
Aboutus, Location(sub menu) 

Button images name - button1.jpg 

我想補充一個我的按鈕圖像在菜單和子菜單

的背景是新來的網頁設計師

需要CSS樣式表的代碼。

Answer 1

純CSS下拉菜單： http://meyerweb.com/eric/css/edge/menus/demo.html

水平下拉菜單：http://www.alistapart.com/articles/horizdropdowns/

CSS JavaScript的下拉菜單：http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm

Answer 2

您需要使用：CSS background-image Property

例子：

.menu 
{ 
    background-image:url('image.gif'); 
} 

然後在你的HTML中增加上述類：

<ul> 
    <li class="menu">Home</li> 
    <li class="menu">About Us</li> 
    <li class="menu">Contact Us</li> 
</ul> 

Answer 3

這個例子是很容易實現的。它不關注IE6 JS問題。您需要使用JS或JQuery來解決這些問題，而不使用:hover僞類 The No-Code Way to a Pure CSS Horizontal Drop-Down Menu with Expression Web