Heim >Web-Frontend >HTML-Tutorial >淘宝导航栏效果_求大牛指导_html/css_WEB-ITnose
淘宝导航栏效果_求大牛指导_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:24:13972Durchsuche
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> Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：一段关于float在IE7以上及FF浏览器不支持的代码_html/css_WEB-ITnoseNächster Artikel：新手请教个问题_html/css_WEB-ITnose