1
剛剛完成創建下拉菜單，但下拉菜單在每個瀏覽器上看起來有點不同。以下是演示：http://cssdeck.com/labs/siw58v7o下拉菜單在每個瀏覽器中看起來都不一樣
Firefox瀏覽器：http://bildeopplaster.no/3-c這是它是如何應該看起來像
編輯：作品鉻現在
Chrome瀏覽器：http://bildeopplaster.no/3-d在這裏你可以看到有一些第一個子文本的間距
編輯：在Safari中它仍然是一樣的。我無法弄清楚我需要改變的代碼在哪裏以及哪些地方，有什麼幫助？
Safari瀏覽器：http://bildeopplaster.no/3-e這裏的第一個子文本類別文本
什麼我需要做，使之同在所有瀏覽器下？
HTML代碼：
<nav class="navigation">
<!-- MEN'S WEAR BUTTON -->
<li class="menswear"><a href="#">MEN'S WEAR</a>
<ul>
<li class="dropdown1"><a href="#">TOPWEAR</a>
<ul>
<li><a href="#">Jackets & Coats</a></li>
<li><a href="#">Shirts</a></li>
<li><a href="#">Overshirts</a></li>
<li><a href="#">T-Shirts</a></li>
<li><a href="#">Basic T-Shirts</a></li>
<li><a href="#">Knitwear</a></li>
<li><a href="#">Sweats</a></li>
</ul>
</li>
<li class="dropdown1"><a href="#">BOTTOMWEAR</a>
<ul>
<li><a href="#">Jeans</a></li>
<li><a href="#">Colour Jeans</a></li>
<li><a href="#">Pants</a></li>
<li><a href="#">Shorts</a></li>
</ul>
</li>
<li class="dropdown1"><a href="#">FOOTWEAR</a>
<ul>
<li><a href="#">Boots</a></li>
<li><a href="#">Sandals</a></li>
<li><a href="#">Shoes</a></li>
<li><a href="#">Snickers</a></li>
</ul>
</li>
<li class="dropdown1"><a href="#">ACCESSORIES</a>
<ul>
<li><a href="#">Belts</a></li>
<li><a href="#">Caps</a></li>
<li><a href="#">Hats</a></li>
<li><a href="#">Scarves</a></li>
<li><a href="#">Gloves</a></li>
<li><a href="#">Sunglasses</a></li>
<li><a href="#">Watches</a></li>
<li><a href="#">Jewelry</a></li>
</ul>
</li>
<li class="dropdown1"><a href="#">SALE</a>
<ul>
<li><a href="#">Jackets & Coats</a></li>
<li><a href="#">Shirts</a></li>
<li><a href="#">Overshirts</a></li>
<li><a href="#">T-Shirts</a></li>
<li><a href="#">Basic T-Shirts</a></li>
<li><a href="#">Knitwear</a></li>
<li><a href="#">Sweats</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav
CSS代碼：
/* ------------------ NAVIGATION ------------------ */
.navigation {
position: relative;
background-color: #fff;
width: 1024px;
height: 42px;
margin: 0 auto;
-webkit-font-smoothing:antialiased;
}
.navigation a {
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
/* ------------------ MEN'S WEAR BUTTON ------------------ */
.menswear {
width:130px !important;
height: 42px;
float:left;
list-style: none;
background: #fff;
position: relative;
}
.menswear:hover {
background: #000;
}
.menswear ul {
overflow:hidden;
background:black;
opacity: 0.5px;
width:1024px;
height:300px;
opacity: 0;
position: relative;
top:26px;
visibility: hidden;
z-index: 1;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.menswear ul {
overflow:hidden;
background: #000;
opacity: 0.5px;
width:1024px;
height:300px;
opacity: 0;
position: relative;
top:26px;
visibility: hidden;
z-index: 1;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.menswear:hover ul { visibility: visible; opacity: 0.9; }
.menswear a {
text-decoration: none;
position: relative;
top: 12px;
font-weight: bold;
padding: 9px 15px 11px 14px;
color: #000;
}
.menswear a:hover:nth-child(1) { color: #fff; }
.menswear li { background: transparent; }
.dropdown1:nth-child(1) {
float: left;
position: relative;
list-style: none;
right: 40px;
padding-bottom: 96px;
padding-left: 40px;
padding-top: 1px;
margin-right: -20px;
}
.dropdown1:nth-child(2) {
float: left;
position: relative;
list-style: none;
top: 0px;
right: 30px;
padding-bottom: 200px;
padding-left: 40px;
padding-top: 1px;
margin-right: -20px;
}
.dropdown1:nth-child(3) {
float: left;
position: relative;
list-style: none;
top: 0px;
right: 30px;
padding-bottom: 200px;
padding-left: 40px;
padding-top: 1px;
margin-right: -20px;
}
.dropdown1:nth-child(4) {
float: left;
position: relative;
list-style: none;
top: 0px;
right: 30px;
padding-bottom: 63px;
padding-left: 40px;
padding-top: 1px;
}
.dropdown1:nth-child(5) {
float: left;
position: relative;
list-style: none;
top: 0px;
right: 30px;
left: 0px;
padding-bottom: 100px;
padding-right: 20px;
padding-top: 1px;
}
.dropdown1 a {
position: relative;
top: 10px;
left: 0px;
font-weight: bold;
color: #888;
}
.dropdown1 a:hover { text-decoration: underline; color: #fff; }
.dropdown1 a:nth-child(1) { color: #cbcbcb; }
.dropdown1 ul {
list-style: none;
display: inline;
position: relative;
padding: 15px;
}
.dropdown1 ul li {
position: relative;
padding: 8px;
bottom: 20px;
right: 5px;
font-size: 13.5px;
}
.dropdown1 ul li a { font-weight: normal; }
.dropdown1 ul li a:hover { color: #fff; }
我張貼的鏈接實際上是下拉菜單的外觀是，我不得不刪除其他按鈕的演示，使代碼可能會小於3000字符在帖子中，但它看起來與其他按鈕相同 – Nohman