淘宝导航栏效果_求大牛指导_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 12:24:13972검색
ul li hover 导航栏 淘宝 css
请问各位大牛这种效果如何实现，主要不明白border那里是如何弄成多边形的，
回复讨论(解决方案)
楼主补充，层级为啥没效果
<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> 성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.