Taobao navigation bar effect_ask for guidance from experts_html/css

Taobao navigation bar effect_ask for guidance from experts_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:24:13

Original

975 people have browsed it

ul li hover navigation bar Taobao css

Could you please tell me how to achieve this effect? I mainly don’t understand how the border is made into a polygon,

Reply to the discussion (solution)

The original poster added, why does the hierarchy have no effect?

<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>

Copy after login

The upper and lower divs are made up of two divs. The upper one has border-bottom:none; the lower one is normal. border, and then use absolute positioning to cover the bottom one.
In addition, there is an artifact in this world called firebug, you can try it.

First of all, we need to ensure the correct dtd. I don’t know if it’s a typo or not pasted in. Then there’s the organic separation of the code and the integration of the effects.

<!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>

Copy after login