个人中心
gpt4 book ai didi

html - CSS 下拉菜单无法正确定位

转载 作者：行者123 更新时间：2023-11-28 08:05:42 25 4
gpt4 key购买 nike

希望有人能帮忙!我正在 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>

最佳答案

你有一个 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>

关于html - CSS 下拉菜单无法正确定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29500220/

25 4 0
文章推荐： php - 如何使用 PHP 浮点值数组在 CSS 中创建条形图？
文章推荐： JQuery 在元素中找到最高的 css 值并更改类
文章推荐： html - 为什么我的 div 被压低了？
文章推荐： html - 将 div 固定为流动 div