css用hover制作下拉菜单
首先我們的需求就是 制作一個(gè)鼠標(biāo)移動(dòng)到某個(gè)區(qū)域就會(huì)有下拉菜單的彈出,這樣會(huì)有更多的子類內(nèi)容,示例代碼如下:
<!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>評(píng)論</a></div><div class="msg"><a>關(guān)注</a></div></div><div class="text">文檔內(nèi)容</div></div> </body> </html>?
實(shí)現(xiàn)的方法: 首先先做一個(gè)html的標(biāo)簽,做個(gè)基本的樣式出來,我們想把用戶這個(gè)框鼠標(biāo)觸摸后有下拉菜單
?
?
做好后的效果:
要實(shí)現(xiàn)這個(gè)功能是要注意幾個(gè)細(xì)節(jié)的 不然會(huì)做的四不像.
1,代碼實(shí)現(xiàn)首先需要注意清除float的浮動(dòng).這樣才能讓下拉框的背景飽滿 撐起來 這時(shí)候要看CSS中的 .clearfix:afttr 的方法 這個(gè)是固定內(nèi)容 ,用來清除float.
2 , ? ??.user .msg 的display: none 這是首先用來隱藏下拉的幾個(gè)標(biāo)簽 隨后hover的時(shí)候 display會(huì)重新覆蓋block;使其出現(xiàn)
3 ? ?這里注意,下拉菜單完成后?繼續(xù)寫后面的text菜單時(shí)彈出的畫面其實(shí)是會(huì)被下方的text 標(biāo)簽覆蓋的..這時(shí)候要注意text會(huì)覆蓋彈出畫面 顯示不出來,因?yàn)樗麄兪切值軜?biāo)簽,所以我們可以給他們加上z-index的屬性來改變層級(jí),讓前面的覆蓋后面,(z-index必須要和position配合)
4 ?text這里加上了個(gè)position=absolute,如果不加 彈出菜單會(huì)影響文檔流,讓文檔內(nèi)容改變位置.
轉(zhuǎn)載于:https://www.cnblogs.com/laoguiaabb/p/8066234.html
總結(jié)
以上是生活随笔為你收集整理的css用hover制作下拉菜单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Windows10搭建FTP服务器
- 下一篇： halcon求取区域顶点