Question

希望有人可以帮忙！我在商店下面创建一个下拉菜单，但我无法弄清楚1.）为什么我不能调整容纳子项目的容器的大小2.）如何移动子项目在左边，在商店btn下对齐。它让我发疯！非常感谢你看看

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 1

你有一个css规则，所有ul元素的填充左侧为235px。所以你的子菜单因此被扩大了。此外，由于浏览器，ul元素具有默认填充。将特定的ul填充设置为0，然后将其拨入尝试。

更新：我已经继续并添加了css，只需给ul.drop-nav一个填充：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下拉菜单无法正确定位

1 个答案: