我正在努力改进我正在使用的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; }