CSS 下拉菜单无法正确定位

Question

希望有人能帮忙！我正在 shop 下创建一个下拉菜单，我只是想不通 1.) 为什么我不能调整包含子项的容器的大小和 2.) 如何将子项移到左侧，在 Shop 下对齐按钮。这让我疯狂！！非常感谢您的关注

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on September 4, 2014 */
@font-face {
    font-family: 'revolution';
    src: url('../fonts/revolution/revolution-webfont.eot');
    src: url('../fonts/revolution/revolution-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/revolution/revolution-webfont.woff') format('woff'),
         url('../fonts/revolution/revolution-webfont.ttf') format('truetype'),
         url('../fonts/revolution/revolution-webfont.svg#revolutionrevolution') format('svg');
    font-weight: normal;
    font-style: normal;
}



/*************************
Start Styling
*************************/

body#pages {
 margin: 0 auto;
 background-image: url('../images/pages_bg.jpg');
 background-repeat: repeat-x;
}


#wrapper_2 {
 width: 1024px;
 background-color: #fff;
 margin: auto;
 
}

/*************************
SHOP MENU
*************************/
#shop_menu {
    position: absolute;
    width: 800px;
    margin-left: -90px;
    margin-top: 42px;
}

#shop_menu ul{
    padding-left: 235px;
    padding-top: 15px;
}

#shop_menu li {
    text-align: center;
    display: inline-block;
    padding-right: 3px;
}

#shop_menu a{
    font-family: 'revolution';
    font-size: 10pt;
    color: #0c5066; /*Teal Blue*/
    text-decoration: none;
}

#shop_menu a:hover{
    color: #d8512b; /*Orange Red*/
    
}

/*----- DROP DOWN -----*/

#dropdown {
    position: relative;
}

.drop-nav {
  position: absolute;
  display: none;
}
.drop-nav li {
  border-bottom: 1px solid #000;
}
#dropdown:hover > .drop-nav {
  display: block;
  background-color: #888;
 
}

<!DOCTYPE html>
<html>
 <head>
  <title>Product Page - SHOP</title>
  <link rel="stylesheet" href="css/stylesTEST.css" />
  </head>

<body id="pages">

  <div id="wrapper_2">

        <!--MENU -->
   <div id="shop_menu">
    <ul>
     <li><a href="mockup.html">Home</a></li>
     <li>&#124;</li>
     <li><a href="#">Mission</a></li>
     <li>&#124;</li>
    <!--DROP DOWN --> 
     <li id="dropdown"><a href="shop.html">Shop</a>
      <ul class="drop-nav">
       <li><a href="#">Womens</a></li>
       <li><a href="#">Mens</a></li>
       <li><a href="#">Womens Plus</a></li>
       <li><a href="#">Mens Plus</a></li>
       <li><a href="#">Prints</a></li>
      </ul>
     </li>
    <!--END DROP DOWN -->  
     <li>&#124;</li>
     <li><a href="#">Partner</a></li>
     <li>&#124;</li>
     <li><a href="#">Contact</a></li>
     <li>&#124;</li>
     <li><a href="#">FAQ</a></li>
     <li>&#124;</li>
     <li><a href="#" style="word-spacing:-1px">Past Campaigns</a>                       </li>
    </ul>
   </div>
   <!--</div>-->
   <!-- END TOP NAV -->

  </div>
</body>

Answer 1

您有一个 css 规则，要求所有 ul 元素的 padding-left 为 235px。所以你的子菜单 ul 相应地加宽了。此外，由于浏览器的原因，ul 元素具有默认填充。将该特定的 ul 填充设置为 0，然后将其拨入品尝。

更新：我已经添加了 css 来给 ul.drop-nav padding:0

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on September 4, 2014 */
@font-face {
    font-family: 'revolution';
    src: url('../fonts/revolution/revolution-webfont.eot');
    src: url('../fonts/revolution/revolution-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/revolution/revolution-webfont.woff') format('woff'),
         url('../fonts/revolution/revolution-webfont.ttf') format('truetype'),
         url('../fonts/revolution/revolution-webfont.svg#revolutionrevolution') format('svg');
    font-weight: normal;
    font-style: normal;
}



/*************************
Start Styling
*************************/

body#pages {
 margin: 0 auto;
 background-image: url('../images/pages_bg.jpg');
 background-repeat: repeat-x;
}


#wrapper_2 {
 width: 1024px;
 background-color: #fff;
 margin: auto;
 
}

/*************************
SHOP MENU
*************************/
#shop_menu {
    position: absolute;
    width: 800px;
    margin-left: -90px;
    margin-top: 42px;
}

#shop_menu ul{
    padding-left: 235px;
    padding-top: 15px;
}

#shop_menu li {
    text-align: center;
    display: inline-block;
    padding-right: 3px;
}

#shop_menu a{
    font-family: 'revolution';
    font-size: 10pt;
    color: #0c5066; /*Teal Blue*/
    text-decoration: none;
}

#shop_menu a:hover{
    color: #d8512b; /*Orange Red*/
    
}

/*----- DROP DOWN -----*/

#dropdown {
    position: relative;
}

.drop-nav {
  position: absolute;
  display: none;
}
.drop-nav li {
  border-bottom: 1px solid #000;
}
#dropdown:hover > .drop-nav {
  display: block;
  background-color: #888;
 
}

/*  SET DROPDOWN .drop-nav UL PADDING TO 0  */
#dropdown ul.drop-nav {
  padding: 0;
}

<body id="pages">

  <div id="wrapper_2">

        <!--MENU -->
   <div id="shop_menu">
    <ul>
     <li><a href="mockup.html">Home</a></li>
     <li>&#124;</li>
     <li><a href="#">Mission</a></li>
     <li>&#124;</li>
    <!--DROP DOWN --> 
     <li id="dropdown"><a href="shop.html">Shop</a>
      <ul class="drop-nav">
       <li><a href="#">Womens</a></li>
       <li><a href="#">Mens</a></li>
       <li><a href="#">Womens Plus</a></li>
       <li><a href="#">Mens Plus</a></li>
       <li><a href="#">Prints</a></li>
      </ul>
     </li>
    <!--END DROP DOWN -->  
     <li>&#124;</li>
     <li><a href="#">Partner</a></li>
     <li>&#124;</li>
     <li><a href="#">Contact</a></li>
     <li>&#124;</li>
     <li><a href="#">FAQ</a></li>
     <li>&#124;</li>
     <li><a href="#" style="word-spacing:-1px">Past Campaigns</a>                       </li>
    </ul>
   </div>
   <!--</div>-->
   <!-- END TOP NAV -->

  </div>
</body>

CSS 下拉菜单无法正确定位

CSS dropdown menu won't position correctly

html

css

positioning

css-position

drop-down-menu