css dropdown menu moving page content
Question
I have made a css dropdown menu out of only css and html. My problem is when I hover over the nav bar- my page content moves to the right. Then when I hover over the dropdown menu, the page content moves back to the left. I have not found anything that can help me so far. I have attached the relevant code below.
Please help me, and thank you
* { 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 answers
solution1
1 ACCPTED 2019-03-14 22:01:59
You need to clear your floats .
.page-body {
…
clear: left;
}
Demo
* { 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>
solution2
1 2019-03-14 22:04:31
The problem is that you add a bottom-border to element which pushes paragraph out of its position. do
ul li a:hover {
color: black;
}
instead of
ul li a:hover {
color: black;
border-bottom: 1px solid #c92d39;
}
or if you really want that border check out css box-sizing property documentation
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
CSS Dropdown Menu Alignment with Content
CSS Dropdown menu behind content
CSS dropdown menu element moving to left?
CSS dropdown menu - whole bar is moving
css right bar menu and content moving down
Drop down menu moving down page content
page content below horizontal menu moving
CSS: Dropdown menu gets hidden behind the content
Dropdown menu css to expand the width based on content
CSS Dropdown menu under content container
Related Tags