在網站設計中,二級菜單是一個非常常見的設計元素。然而,想要二級菜單看起來美觀且易于使用,并不容易。CSS提供了一些強大的工具來實現這個目標,如下面所示的樣式。
/* 二級菜單樣式 */ ul { list-style-type: none; margin: 0; padding: 0; } ul li { display: inline-block; position: relative; } ul li ul { display: none; position: absolute; top: 100%; left: 0; z-index: 1; } ul li:hover ul { display: block; }
這個樣式使用無序列表來創建二級菜單。每個列表項被設置為inline-block,這樣它們可以橫向排列,而不是垂直排列。設置position為relative是為了使二級菜單能夠相對于其父元素定位。
接下來,使用CSS中的絕對定位,將二級菜單放在父元素下面的位置。在這個樣式中,ul li ul是二級菜單元素的CSS選擇器。將其position設置為absolute,并將top設置為100%。這意味著二級菜單將始終出現在其父元素下方。
最后,利用:hover偽類使二級菜單在鼠標懸停在其父元素上時顯示。這個樣式使用display:none隱藏二級菜單,并在:hover時將其display設置為block。
以上就是一個使用CSS創建二級菜單的簡單的樣式。它確保了二級菜單的可見性和易用性,同時保持了一個良好的視覺風格。
上一篇為不同分辨率的屏幕css
下一篇為什么要弄css前綴