Question

我在特定页面上有这个奇怪的子菜单下拉列表，它与产品的文本标题重叠。见图。

http://i.imgur.com/Qiq6ri9.png

但是当我到达主页时。它看起来还不错。

http://i.imgur.com/u4MtIKb.png

这是我子菜单上的CC。这是我的HTML专栏：

<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 a { 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 a { color: #9fa2a0;}
.category_menu .drop-nav a:hover {color: #3db7e4;}

奇怪的子菜单下拉菜单

0 个答案: