淘宝导航栏效果_求大牛指导_html/css_WEB-ITnose-html教程-PHP中文网

回复讨论(解决方案)

首页

web前端

html教程

淘宝导航栏效果_求大牛指导_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:24 PM

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