0

我很难尝试改进我用作我的一个网站的基础的 magento 主题。我希望导航菜单(包装菜单)进行淡入和淡出转换,但是我想尝试在互联网上搜索大约两天但无法找到答案。

PS。我知道代码太脏了,我稍后会修复它。我也不会只使用 webkit 包,我只是想找出正确的方法来调整所有浏览器的代码。

这是html:

<nav class="prmd">
    <ul id="prmdNav">
        <li class="level0 level-top">
            <a href="index.php/"><span>Home</span></a>
         </li>
        <li class="level0 nav-1 level-top first parent">
            <a href="index.php/furniture.html" class="level-top">
                <span>Furniture</span>
            </a>
            <div class="sub-wrapper">
            <ul class="level0">
                <li>
                    <ol>
                        <li class="level1 nav-1-1 first">
                            <a href="index.php/furniture/living-room.html">
                                <span>Living Room</span>
                            </a>
                        </li>
                        <li class="level1 nav-1-2 last">
                            <a href="index.php/furniture/bedroom.html">
                                <span>Bedroom</span>
                            </a>
                        </li>
                    </ol>
                </li>
            </ul>
            </div>
        </li>
        <li class="level0 nav-2 level-top parent">
            <a href="index.php/electronics.html" class="level-top">
                <span>Electronics</span>
            </a>
            <div class="sub-wrapper">
            <ul class="level0">
                <li >
                    <ol>
                        <li class="level1 nav-2-1 first">
                            <a href="index.php/electronics/cell-phones.html">
                                <span>Cell Phones</span>
                            </a>
                        </li>
                        <li class="level1 nav-2-2 parent">
                            <a href="index.php/electronics/cameras.html">
                                <span>Cameras</span>
                            </a>
                            <div class="sub-wrapper">
                            <ul class="level1">
                                <li class="level2 nav-2-2-1 first">
                                    <a href="index.php/electronics/cameras/accessories.html">
                                        <span>Accessories</span>
                                    </a>
                                </li>
                                <li class="level2 nav-2-2-2 last">
                                    <a href="index.php/electronics/cameras/digital-cameras.html">
                                        <span>Digital Cameras</span>
                                    </a>
                                </li>
                            </ul>
                            </div>
                        </li>
                        <li class="level1 nav-2-3 last parent">
                            <a href="index.php/electronics/computers.html">
                                <span>Computers</span>
                            </a>
                            <div class="sub-wrapper">
                                <ul class="level1">
                                <li class="level2 nav-2-3-3 first">
                                    <a href="index.php/electronics/computers/build-your-own.html">
                                        <span>Build Your Own</span>
                                    </a>
                                </li>
                                <li class="level2 nav-2-3-4">
                                    <a href="index.php/electronics/computers/laptops.html">
                                        <span>Laptops</span>
                                    </a>
                                </li>
                                <li class="level2 nav-2-3-5">
                                    <a href="index.php/electronics/computers/hard-drives.html">
                                        <span>Hard Drives</span>
                                    </a>
                                </li>
                                <li class="level2 nav-2-3-6">
                                    <a href="index.php/electronics/computers/monitors.html">
                                        <span>Monitors</span>
                                    </a>
                                </li>
                                <li class="level2 nav-2-3-7">
                                    <a href="index.php/electronics/computers/ram-memory.html">
                                        <span>RAM / Memory</span>
                                    </a>
                                </li>
                                <li class="level2 nav-2-3-8">
                                    <a href="index.php/electronics/computers/cases.html">
                                        <span>Cases</span>
                                    </a>
                                </li>
                                <li class="level2 nav-2-3-9">
                                    <a href="index.php/electronics/computers/processors.html">
                                        <span>Processors</span>
                                    </a>
                                </li>
                                <li class="level2 nav-2-3-10 last">
                                    <a href="index.php/electronics/computers/peripherals.html">
                                        <span>Peripherals</span>
                                    </a>
                                </li>
                                </ul>
                            </div>
                        </li>
                    </ol>
                </li>
            </ul>
            </div>
        </li>
        <li class="level0 nav-3 level-top last parent">
            <a href="index.php/apparel.html" class="level-top">
                <span>Apparel</span>
            </a>
            <div class="sub-wrapper">
                <ul class="level0">
                    <li >
                        <ol>
                            <li class="level1 nav-3-1 first">
                                <a href="index.php/apparel/shirts.html">
                                    <span>Shirts</span>
                                </a>
                            </li>
                            <li class="level1 nav-3-2 parent">
                                <a href="index.php/apparel/shoes.html">
                                    <span>Shoes</span>
                                </a>
                                <div class="sub-wrapper">
                                    <ul class="level1">
                                        <li class="level2 nav-3-2-1 first">
                                            <a href="index.php/apparel/shoes/mens.html">
                                                <span>Mens</span>
                                            </a>
                                        </li>
                                        <li class="level2 nav-3-2-2 last">
                                            <a href="index.php/apparel/shoes/womens.html">
                                                <span>Womens</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="level1 nav-3-3 last">
                                <a href="index.php/apparel/hoodies.html">
                                    <span>Hoodies</span>
                                </a>
                            </li>
                        </ol>
                    </li>
                </ul>
            </div>
        </li>

这是CSS代码:

/********** < Navigation */
.nav-container {width:100%; margin:0 auto; position:relative; z-index:10010; }
#navigation_select{display:none; min-width:100% }
nav .nav-top-title, .nav-container .nav-top-title{font-family:'Myriad Pro', sans-serif; font-size:16px; text-align:center; margin:0; display:none !important; }

nav.prmd {width:100%; margin:0 auto; position:relative; z-index:10010; }
#prmdNav { width:780px; margin:31px 0 34px 46px; padding:0; position:relative; border:none; float:left; -webkit-transition: all 0.5s ease;}

/* All Levels */
#prmdNav li { text-align:left; position: static;  }
#prmdNav li.over { z-index:998; }
#prmdNav li.parent {}
#prmdNav li a { display:block; text-decoration:none; font-weight:300; }
#prmdNav li a:hover { text-decoration:none; }
#prmdNav li a span { display:block; white-space:nowrap; cursor:pointer; }
#prmdNav li ul a span { white-space:normal; }

/* 1st Level */
#prmdNav>li { float:left; position:relative; margin:0 3px 3px; background-color:white;}
#prmdNav>li>a {-webkit-transition:color 0.2s ease-in-out; position:relative; float:left; padding:0; color:#555; font-size:14px; font-family:"Myriad Pro",sans-serif; font-weight:700; line-height:36px; letter-spacing:-0.1em; text-transform:uppercase; }
#prmdNav>li>a>span{padding:0px 10px; border-top:3px solid transparent; border-left:3px solid transparent;  border-right:3px solid transparent; border-bottom:0px;; -webkit-transition:border 0.5s ease;}
#prmdNav>li:hover>a>span,
#prmdNav>li.over>a>span,
#prmdNav>li.active>a>span {border-top:3px solid #f2f2f2; border-left:3px solid #f2f2f2;  border-right:3px solid #f2f2f2; border-bottom:0px; background:#fff;  }
#prmdNav>li>a:hover {color:#d1bfaa;}
#prmdNav>li:hover,
#prmdNav>li.over, 
#prmdNav>li.over>a{z-index:1000;}
#prmdNav>li>a:hover>span,
#prmdNav>li.over>a>span,
#prmdNav>li.active>a>span {}
#prmdNav>li.custom-block>a, #prmdNav>li.custom-block>a>span {cursor:default;}

/* 2nd Level */
/*#prmdNav ul,*/
#prmdNav div.sub-wrapper {position:absolute; z-index:999; width:auto; padding:16px 0; margin:36px 0 0; left:-10000px; background:#fff; border:3px solid #f2f2f2;}
#prmdNav div.sub-wrapper ul { position:static; width:auto;}

/* 3rd+ leven */
/*#prmdNav ul ul,*/
#prmdNav div.sub-wrapper ul div.sub-wrapper { top:-5px; margin:0 0 0 101px; padding:0; width:auto; border:none;
    -webkit-box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.15);
       -moz-box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.15);
            box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.15);}
#prmdNav ul div.sub-wrapper ul{ padding:16px; width:auto; }
#prmdNav ul li { float:none; border:none; width:210px; line-height:28px; position:relative; }
#prmdNav ul li.last {}
#prmdNav ul li a {float:none; padding:0 10px; font-family:Arial, serif; font-size:12px; font-weight:normal; color:#322c29 !important; background:transparent none; }
#prmdNav ul li.active > a {background:#332d2a !important; color:#fff !important; }
#prmdNav ul li.over > a, #prmdNav ul li a:hover {background:#f5f5f5; }

/* Show menu */
#prmdNav li ul.shown-sub,
#prmdNav li div.shown-sub { left:0px; z-index:999; }
#prmdNav li .shown-sub ul.shown-sub,
#prmdNav li .shown-sub li div.shown-sub { left:15px; }

#prmdNav li.custom-block div.sub-wrapper { padding:16px;}
#prmdNav li.custom-block div.sub-wrapper strong {color:#373230; font-family:"Myriad Pro", sans-serif; font-weight:700;}
#prmdNav li.custom-block div.sub-wrapper a { display:inline; color:#383331; float:none; font-weight:300; padding:0px; text-decoration:underline; border:none !important; background:transparent none !important;}
#prmdNav li.custom-block div.sub-wrapper a:hover,
#prmdNav li.custom-block div.sub-wrapper>ul>li a:hover,
#prmdNav li.custom-block div.sub-wrapper ul li.over > a{ color:#383331 !important; text-decoration:none; background:transparent none !important;}
#prmdNav li.custom-block div.sub-wrapper>ul, #prmdNav li.custom-block div.sub-wrapper ul {}
#prmdNav li.custom-block div.sub-wrapper>ul>li, #prmdNav li.custom-block div.sub-wrapper ul li { width:auto; float:none; background:transparent url("../images/arrow_item.gif") no-repeat 10px 8px !important;; line-height: 22px; padding: 0 10px 0 20px;}


#nav { width:780px; margin:31px 0 34px 46px; padding:0; position:relative; border:none; float:left; }
4

0 回答 0