css下拉菜單移動頁面內容
[英]css dropdown menu moving page content
問題描述
我只用css和html制作了一個css下拉菜單。 我的問題是當我將鼠標懸停在導航欄上時 - 我的頁面內容向右移動。 然后當我將鼠標懸停在下拉菜單上時，頁面內容會向左移動。 到目前為止，我還沒有找到任何可以幫助我的東西。 我已附上以下相關代碼。
請幫幫我，謝謝
* { padding: 0; margin: 0; } nav { background-color: #cccccc; width: 100%; height: 80px; } ul { float: left; } ul li { position: relative; list-style: none; float: left; line-height: 80px; font-size: 20px; color: #c92d39; } ul li a{ display: block; text-decoration: none; color: #c92d39; padding: 0 30px; } ul li a:hover { color: black; border-bottom: 1px solid #c92d39; } ul li:hover ul { display: block; } ul li ul { display: none; position: absolute; background-color: #e5e5e5; border-radius: 0 0 3px 3px; } ul li ul li a:hover { background-color: #b2b2b2; color: #c92d39; border-bottom: none; } ul li ul li { font-size: 15px; width: 100%; text-align: center; } h1 { color: #c92d39; padding: 30px; } h2 { color: #c92d39; padding: 5px 30px 10px 30px; } p { padding: 0px 30px; } a { text-decoration: none; } #logo { background-color: #cccccc; padding: 0 51px 0 75px; font-size: 30px; font-weight: bold; } .page-body { background-color: #e5e5e5; } .wrapper { margin: 0 300px 0 300px; padding-left: 0px; height: 100%; background-color: white; } .footer { background-color: #cccccc; width: 100%; height: 80px; } .empty_box { height: 1000px; width: 100%; } #contacts { margin: 0px 0px 0px 60px; padding: 0 20px; border-top: 1px solid #cccccc; } #contacts:hover { border-top: 1px solid #c92d39; } #copyright { font-size: 10px; float: right; padding: 0px 30px 0 770px; } #copyright:hover { background-color: #cccccc; }
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Basecode</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <nav> <ul> <li id="logo">Cultural Asia</li> </ul> <ul> <li><a href="index.html">Home</a></li> <li> <a href="attractions.html">Attractions</a> <ul> <li><a href="#">attraction1</a></li> <li><a href="#">attraction2</a></li> <li><a href="#">attraction3</a></li> </ul> </li> <li> <a href="packages.html">Packages</a> <ul> <li><a href="#">package1</a></li> <li><a href="#">package2</a></li> <li><a href="#">package3</a></li> </ul> </li> <li><a href="contacts.html">Contacts</a></li> </ul> </nav> <div class="page-body"> <div class="wrapper"> <p>hi</p> <div class="empty_box"></div> </div> </div> <div class="footer"> <ul> <li><a href="contacts.html" id="contacts">Contact Details</a></li> <li id="copyright">Copyright Lachlan Dunn</li> </ul> </div> </body> </html>
2 個解決方案
解決方案1
1 已采納 2019-03-14 22:01:59
你需要清理floats 。
.page-body {
…
clear: left;
}
演示
* { padding: 0; margin: 0; } nav { background-color: #cccccc; width: 100%; height: 80px; } ul { float: left; } ul li { position: relative; list-style: none; float: left; line-height: 80px; font-size: 20px; color: #c92d39; } ul li a { display: block; text-decoration: none; color: #c92d39; padding: 0 30px; } ul li a:hover { color: black; border-bottom: 1px solid #c92d39; } ul li:hover ul { display: block; } ul li ul { display: none; position: absolute; background-color: #e5e5e5; border-radius: 0 0 3px 3px; } ul li ul li a:hover { background-color: #b2b2b2; color: #c92d39; border-bottom: none; } ul li ul li { font-size: 15px; width: 100%; text-align: center; } h1 { color: #c92d39; padding: 30px; } h2 { color: #c92d39; padding: 5px 30px 10px 30px; } p { padding: 0px 30px; } a { text-decoration: none; } #logo { background-color: #cccccc; padding: 0 51px 0 75px; font-size: 30px; font-weight: bold; } .page-body { background-color: #e5e5e5; clear: left; } .wrapper { margin: 0 300px 0 300px; padding-left: 0px; height: 100%; background-color: white; } .footer { background-color: #cccccc; width: 100%; height: 80px; } .empty_box { height: 1000px; width: 100%; } #contacts { margin: 0px 0px 0px 60px; padding: 0 20px; border-top: 1px solid #cccccc; } #contacts:hover { border-top: 1px solid #c92d39; } #copyright { font-size: 10px; float: right; padding: 0px 30px 0 770px; } #copyright:hover { background-color: #cccccc; }
<nav> <ul> <li id="logo">Cultural Asia</li> </ul> <ul> <li><a href="index.html">Home</a></li> <li> <a href="attractions.html">Attractions</a> <ul> <li><a href="#">attraction1</a></li> <li><a href="#">attraction2</a></li> <li><a href="#">attraction3</a></li> </ul> </li> <li> <a href="packages.html">Packages</a> <ul> <li><a href="#">package1</a></li> <li><a href="#">package2</a></li> <li><a href="#">package3</a></li> </ul> </li> <li><a href="contacts.html">Contacts</a></li> </ul> </nav> <div class="page-body"> <div class="wrapper"> <p>hi</p> <div class="empty_box"></div> </div> </div> <div class="footer"> <ul> <li><a href="contacts.html" id="contacts">Contact Details</a></li> <li id="copyright">Copyright Lachlan Dunn</li> </ul> </div>
解決方案2
1 2019-03-14 22:04:31
問題是你向元素添加了一個底部邊框，它將段落推出了它的位置。 做
ul li a:hover {
color: black;
}
代替
ul li a:hover {
color: black;
border-bottom: 1px solid #c92d39;
}
或者如果你真的想要那個邊框檢查css box-sizing屬性文檔
CSS下拉菜單與內容對齊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.