首先我們的需求就是 制作一個鼠標移動到某個區域就會有下拉菜單的彈出,這樣會有更多的子類內容,示例代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } .title{ background-color: #2b99ff; height: 50px; line-height: 50px; text-align: center; color: #3d2fa2; } .user{ width: 180px; height: 50px; margin-left: 20px; background-color: #7a7b50; cursor: auto; } .user .msg{ display: none; width: 200px; height: 40px; float: left; border: 1px solid red ; background-color: #787b53; z-index: 2; position: relative; } .user .msg a:hover{ cursor: pointer; } .clearfix:after{ content:"0"; display: block; clear: both; visibility: hidden; height: 0; } .user:hover .msg{ display: block; } .text{ font-size: 30px; color: black; background-color: #99aecb; height: 800px; position: absolute; width: 1500px; z-index: 1; } </style> </head> <body> <div class="title"> <div class="user clearfix">用戶 <div class="msg"><a>博客</a></div> <div class="msg"><a>閃存</a></div> <div class="msg"><a>積分</a></div> <div class="msg"><a>評論</a></div> <div class="msg"><a>關注</a></div> </div> <div class="text">文檔內容</div> </div> </body> </html>
實現的方法: 首先先做一個html的標簽,做個基本的樣式出來,我們想把用戶這個框鼠標觸摸后有下拉菜單
做好后的效果:
要實現這個功能是要注意幾個細節的 不然會做的四不像.
1,代碼實現首先需要注意清除float的浮動.這樣才能讓下拉框的背景飽滿 撐起來 這時候要看CSS中的 .clearfix:afttr 的方法 這個是固定內容 ,用來清除float.
2 , .user .msg 的display: none 這是首先用來隱藏下拉的幾個標簽 隨后hover的時候 display會重新覆蓋block;使其出現
3 這里注意,下拉菜單完成后 繼續寫后面的text菜單時彈出的畫面其實是會被下方的text 標簽覆蓋的..這時候要注意text會覆蓋彈出畫面 顯示不出來,因為他們是兄弟標簽,所以我們可以給他們加上z-index的屬性來改變層級,讓前面的覆蓋后面,(z-index必須要和position配合)
4 text這里加上了個position=absolute,如果不加 彈出菜單會影響文檔流,讓文檔內容改變位置.