0
希望有人可以请帮助！我在商店下面创建了一个下拉菜单，我无法弄清楚1.）为什么我无法调整容纳子项目的容器的大小，以及2.）如何将子项目移到左侧，在商店下方对齐BTN。这让我疯狂！！非常感谢您考虑看看CSS下拉菜单将无法正确定位
/* 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 {
\t margin: 0 auto;
\t background-image: url('../images/pages_bg.jpg');
\t background-repeat: repeat-x;
}
#wrapper_2 {
\t width: 1024px;
\t background-color: #fff;
\t margin: auto;
\t
}
/*************************
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>
\t <head>
\t \t <title>Product Page - SHOP</title>
\t \t <link rel="stylesheet" href="css/stylesTEST.css" />
\t \t </head>
<body id="pages">
\t \t <div id="wrapper_2">
<!--MENU -->
\t \t \t <div id="shop_menu">
\t \t \t \t <ul>
\t \t \t \t \t <li><a href="mockup.html">Home</a></li>
\t \t \t \t \t <li>|</li>
\t \t \t \t \t <li><a href="#">Mission</a></li>
\t \t \t \t \t <li>|</li>
\t \t \t \t <!--DROP DOWN --> \t
\t \t \t \t \t <li id="dropdown"><a href="shop.html">Shop</a>
\t \t \t \t \t \t <ul class="drop-nav">
\t \t \t \t \t \t \t <li><a href="#">Womens</a></li>
\t \t \t \t \t \t \t <li><a href="#">Mens</a></li>
\t \t \t \t \t \t \t <li><a href="#">Womens Plus</a></li>
\t \t \t \t \t \t \t <li><a href="#">Mens Plus</a></li>
\t \t \t \t \t \t \t <li><a href="#">Prints</a></li>
\t \t \t \t \t \t </ul>
\t \t \t \t \t </li>
\t \t \t \t <!--END DROP DOWN --> \t \t
\t \t \t \t \t <li>|</li>
\t \t \t \t \t <li><a href="#">Partner</a></li>
\t \t \t \t \t <li>|</li>
\t \t \t \t \t <li><a href="#">Contact</a></li>
\t \t \t \t \t <li>|</li>
\t \t \t \t \t <li><a href="#">FAQ</a></li>
\t \t \t \t \t <li>|</li>
\t \t \t \t \t <li><a href="#" style="word-spacing:-1px">Past Campaigns</a> </li>
\t \t \t \t </ul>
\t \t \t </div>
\t \t \t <!--</div>-->
\t \t \t <!-- END TOP NAV -->
\t \t </div>
</body>
谢谢！我希望这是一个“呃”类的东西:) – Courtney
NP - 有很多隐藏的HTML和CSS'陷阱'，你只需要沿途拾取。如果这有用，请投我一票。 –