Home > Article > Web Front-end > Taobao navigation bar effect_ask for guidance from experts_html/css_WEB-ITnose
Taobao navigation bar effect_ask for guidance from experts_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:24:13958browse
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> 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> Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn