Question

我刚刚创建了一个下拉菜单，但每个浏览器的下拉菜单看起来有点不同。以下是演示：http://cssdeck.com/labs/siw58v7o

Firefox浏览器：http://bildeopplaster.no/3-c这就是它看起来像

的样子

编辑：现在在Chrome中使用

Chrome浏览器：http://bildeopplaster.no/3-d您可以在此处看到第一个子文本

上有一些间距

编辑：在Safari中它仍然是相同的。我无法弄清楚代码中需要更改的地方和内容，任何帮助？

Safari浏览器：http://bildeopplaster.no/3-e此处第一个子文本位于类别文本

下方

在所有浏览器中，我需要做些什么？

HTML code：

<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; }

Answer 1

这似乎是在Chrome中实现的。（将填充从15px更改为0）

.dropdown1 ul {
    paddning: 0;
}

http://cssdeck.com/labs/qezkkref

Answer 2

将以下代码放入CSS文件中。希望这会奏效。

.dropdown1 ul li, .dropdown1 ul li a{
    float:left;
    width:100%;
}

每个浏览器中的下拉菜单看起来都不同

2 个答案: