ul li hover 导航栏 淘宝 css
楼主补充，层级为啥没效果
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>.dpnone{ display:none;}#nav{ width:100px; height:50px; border-left:2px solid #C1C1C1; border-right:2pxsolid #C1C1C1; border-top:2px solid #C1C1C1; background-color:#09F ; position:relative; z-index:999; }#nav_child{ width:200px; height:100px; border:2px solid #C1C1C1; background-color:#F90; position:absolute; z-index:10; top:48px; }#nav:hover #nav_child{ display:block;}</style></head><body><div id="nav"> <a>adc</a> <div id="nav_child" class="dpnone"> <a>def</a> </div></div></body></html> 上下两个div拼的，上面一个border-bottom:none;下面一个正常border，然后用绝对定位上面覆盖下面的。
另外这个世界有款神器叫firebug，你可以试试。
首先要保证正确的dtd，不知道是笔误，还是没有粘贴上来，然后才是代码的有机分离与效果的整合。
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> .dpnone{ display:none;} #nav{ position:relative; z-index:999; } #nav_child{ width:200px; height:100px; border:2px solid #C1C1C1; background-color:#F90; position:absolute; z-index:10; top:48px; } #nav:hover #nav_child{ display:block;} .first{ position:absolute; top: 0;left: 0; display:block; z-index:12; width:100px; height:50px; border-left:2px solid #C1C1C1; border-right:2px solid #C1C1C1; border-top:2px solid #C1C1C1; background-color:#09F; } </style></head><body><div id="nav"> <a class="first">adc</a> <div id="nav_child" class="dpnone"> <a>def</a> </div></div></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
799
收藏
