CSS下拉菜單無法正確定位
[英]CSS dropdown menu won't position correctly
問題描述
希望有人可以幫忙！ 我正在shop下創建一個下拉菜單，但我無法弄清楚1.）為什么不能調整容納子項目的容器的大小，以及2.）如何將子項目移到左側，在Shop下對齊btn。 這讓我瘋狂！！ 非常感謝您的光臨
/* 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>|</li> <li><a href="#">Mission</a></li> <li>|</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>|</li> <li><a href="#">Partner</a></li> <li>|</li> <li><a href="#">Contact</a></li> <li>|</li> <li><a href="#">FAQ</a></li> <li>|</li> <li><a href="#" style="word-spacing:-1px">Past Campaigns</a> </li> </ul> </div> <!--</div>--> <!-- END TOP NAV --> </div> </body>
1 個解決方案
解決方案1
0 已采納 2015-04-07 20:07:26
您有一個css規則，所有ul元素的左填充均為235px。 因此，您的子菜單會相應擴大。 另外，由於瀏覽器的原因，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>|</li> <li><a href="#">Mission</a></li> <li>|</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>|</li> <li><a href="#">Partner</a></li> <li>|</li> <li><a href="#">Contact</a></li> <li>|</li> <li><a href="#">FAQ</a></li> <li>|</li> <li><a href="#" style="word-spacing:-1px">Past Campaigns</a> </li> </ul> </div> <!--</div>--> <!-- END TOP NAV --> </div> </body>
CSS 不會顯示下拉菜單
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.