html - Weird sub menu dropdown -
i have weird submenu dropdown on specific page , overlap text title of product. see image.
http://i.imgur.com/qiq6ri9.png
but when got home page. looks okay.
http://i.imgur.com/u4mtikb.png
this cc on sub menu. html lines:
<ul class="category_menu"> <li><a href="http://www.asakapa.com/under-20-dollar">under $20</a></li> <li class="dropdown"><a href="http://www.asakapa.com/men">men </a> <ul class="drop-nav"> <li><a href="http://www.asakapa.com/men-apparel">apparel</a></li> <li><a href="http://www.asakapa.com/men-matches">watches</a></li> <li><a href="http://www.asakapa.com/men-footwears">footwear</a></li> <li><a href="http://www.asakapa.com/men-wallets">wallets</a></li> <li><a href="http://www.asakapa.com/men-sunglasses">sunglasses</a></li> <li><a href="http://www.asakapa.com/more-on-men">more on men</a></li> </ul> </li> css:
/* category menu */ .category_menu { float:left;margin-left:30px;} .category_menu > li { float:left; list-style:none; border-right:#616682 solid thin; padding: 0px 20px;} .category_menu li { color:#616682; font-size:14px; white-space:nowrap} /* sub category menu */ .category_menu .dropdown { position:relative } .category_menu .drop-nav { position:absolute; display:none; background:#fff; /* border: 1px solid #2e3454; */ left: 0; top: 20px; border-radius:10px; padding: 10px 10px; } .category_menu .drop-nav: before { content: ""; display: block; width: 0; height: 0; -moz-transform: scale(1.05); -o-transform: rotate(0.05deg); position: absolute; left: 10px; top: -14px; z-index: 10; border-style: solid; border-width: 0 10px 14px 10px; border-color: transparent transparent #2e3454 transparent; border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) #2e3454 rgba(255, 255, 255, 0); z-index: 9; } .category_menu .drop-nav: after { content: ""; display: block; width: 0; height: 0; -moz-transform: scale(1.05); -o-transform: rotate(0.05deg); position: absolute; left: 11px; top: -12px; z-index: 10; border-style: solid; border-width: 0 9px 12px 9px; border-color: transparent transparent #fff transparent; border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) #fff rgba(255, 255, 255, 0); z-index: 10; } .dropdown:hover > .drop-nav { display:block } .category_menu .drop-nav li {padding: 2px 3px;font-size:12px; list-style:none} .category_menu .drop-nav { color: #9fa2a0;} .category_menu .drop-nav a:hover {color: #3db7e4;}
Comments
Post a Comment