AI智能
改变未来

HTML+CSS弹出二级菜单


效果:

代码:

html

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>PopupSecondaryMenu</title><link rel=\"stylesheet\" type=\"text/css\" href=\"./css/PopupSecondaryMenu.css\"></head><body><a href=\"#\">鼠标移到此位置<div class=\"Popup\"><p>菜单一</p><p>菜单二</p><p>菜单三</p></div></a></body></html>

css

a{margin: 0px;padding: 0px;width: 100px;height: 100px;text-decoration: none;color: black;}a:hover{background-color: gray;box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);}.Popup{width: 400px;height: 200px;display: none;position: absolute;background-color: white;color: black;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);}a:hover .Popup{display: block;}
赞(0) 打赏
未经允许不得转载:爱站程序员基地 » HTML+CSS弹出二级菜单