HTML / CSS顶部水平导航栏

Question

I need help with my top horizontal navigation bar. 我的顶部水平导航栏需要帮助。 Currently i have a dropdown menu and i'm not sure why when i hover on it and the dropdown opens, the background colour of the nav bar extends further down. 目前我有一个下拉菜单，我不知道为什么当我将鼠标悬停在它上面并且下拉列表打开时，导航栏的背景颜色会进一步向下延伸。 Can someone help me with this. 有人可以帮我弄这个吗。 Thanks 谢谢

Here is jsbin 这是jsbin

 .topnav { position: fixed; top: 0; left: 0; width: 100%; list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #ffff00; z-index: 10; } .topmenu { float: left; font-family: 'Lato', sans-serif; } .topmenu a { display: block; color: #424242; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #c7cc00; color: white; } .dropdown:hover .dropbtn { background-color: green; } li.dropdown { display: inline-block; text-align: left; } .dropdown-content { display: none; position: relative; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 10; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; }

 <ul class = "topnav"> <h3> <li class = "topmenu"><img src = "logomain.png" style = "width:150px;height:64px;"></li> <li class = "topmenu"><a href="index.html">Home</a></li> <li class = "topmenu"><a href="context.html">Context</a></li> <li class = "topmenu"><a href="countryExamples.html">Country Examples</a></li> <li class = "topmenu"><a href="takeTheTest.html">Take the Test </a></li> <li class = "topmenu"><a href="loginSignup.html">Login/Signup</a></li> <li class = "topmenu"><a href="aboutUs.html">About Us</a></li> <li class = "topmenu dropdown"> <a href="javascript:void(0)" class="dropbtn">Help</a> <div class="dropdown-content"> <a href="#">FAQ</a> <a href="#">Contact</a> </div> </li> </h3> </ul> <div class="content"> <p>ABOUT US</p> <p>information on us (NAMES, SID, UNIKEY, YEAR, DEGREE)</p> </div>

Answer 1

just remove the overflow from 'topnav' and apply absolute position to '.dropdown-content' 只需从'topnav'中删除溢出并将绝对位置应用于'。dropdown-content'

See the Below Snippet: 请参阅以下代码段：

 .topnav { position: fixed; top: 0; left: 0; width: 100%; list-style-type: none; margin: 0; padding: 0; //overflow: hidden; /* Change Here */ background-color: #ffff00; z-index: 10; } .topmenu { float: left; font-family: 'Lato', sans-serif; } .topmenu a { display: block; color: #424242; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #c7cc00; color: white; } .dropdown:hover .dropbtn { background-color: green; } li.dropdown { display: inline-block; text-align: left; } .dropdown-content { display: none; position: absolute; /* Change Here */ background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1000; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; }

 <!DOCTYPE html> <html> <head> <title>MIE - About Us</title> <link rel="stylesheet" type="text/css" href="Index.css"> <link rel="stylesheet" type="text/css" href="topNav.css"> <!-- <link href="https://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet"> --> </head> <h1>Money Isn't Everything</h1> <body> <ul class = "topnav"> <h3> <li class = "topmenu"><img src = "logomain.png" style = "width:150px;height:64px;"></li> <li class = "topmenu"><a href="index.html">Home</a></li> <li class = "topmenu"><a href="context.html">Context</a></li> <li class = "topmenu"><a href="countryExamples.html">Country Examples</a></li> <li class = "topmenu"><a href="takeTheTest.html">Take the Test </a></li> <li class = "topmenu"><a href="loginSignup.html">Login/Signup</a></li> <li class = "topmenu"><a href="aboutUs.html">About Us</a></li> <li class = "topmenu dropdown"> <a href="javascript:void(0)" class="dropbtn">Help</a> <div class="dropdown-content"> <a href="#">FAQ</a> <a href="#">Contact</a> </div> </li> </h3> </ul> <div class="content"> <p>ABOUT US</p> <p>information on us (NAMES, SID, UNIKEY, YEAR, DEGREE)</p> </div> </body> </html>

Answer 2

You use position:relative in dropdown so navbar extends yellow color. 您在下拉列表中使用position:relative ，因此navbar会扩展为黄色。

 .topnav { position: fixed; top: 0; left: 0; width: 100%; list-style-type: none; margin: 0; padding: 0; background-color: #ffff00; z-index: 10; } .topmenu { float: left; font-family: 'Lato', sans-serif; } .topmenu a { display: block; color: #424242; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #c7cc00; color: white; } .dropdown:hover .dropbtn { background-color: green; } li.dropdown { display: inline-block; text-align: left; position: relative; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 10; right:0; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; }

 <!DOCTYPE html> <html> <head> <title>MIE - About Us</title> <link rel="stylesheet" type="text/css" href="Index.css"> <link rel="stylesheet" type="text/css" href="topNav.css"> <!-- <link href="https://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet"> --> </head> <h1>Money Isn't Everything</h1> <body> <ul class = "topnav"> <h3> <li class = "topmenu"><img src = "logomain.png" style = "width:150px;height:64px;"></li> <li class = "topmenu"><a href="index.html">Home</a></li> <li class = "topmenu"><a href="context.html">Context</a></li> <li class = "topmenu"><a href="countryExamples.html">Country Examples</a></li> <li class = "topmenu"><a href="takeTheTest.html">Take the Test </a></li> <li class = "topmenu"><a href="loginSignup.html">Login/Signup</a></li> <li class = "topmenu"><a href="aboutUs.html">About Us</a></li> <li class = "topmenu dropdown"> <a href="javascript:void(0)" class="dropbtn">Help</a> <div class="dropdown-content"> <a href="#">FAQ</a> <a href="#">Contact</a> </div> </li> </h3> </ul> <div class="content"> <p>ABOUT US</p> <p>information on us (NAMES, SID, UNIKEY, YEAR, DEGREE)</p> </div> </body> </html>

Answer 3

You need to add position:absolute instead of position:relative in .dropdown-content 你需要在.dropdown-content添加position:absolute而不是position:relative

 .topnav { position: fixed; top: 0; left: 0; width: 100%; list-style-type: none; margin: 0; padding: 0; //overflow: hidden; background-color: #ffff00; z-index: 10; } .topmenu { float: left; font-family: 'Lato', sans-serif; } .topmenu a { display: block; color: #424242; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #c7cc00; color: white; } .dropdown:hover .dropbtn { background-color: green; } li.dropdown { display: inline-block; text-align: left; position:relative; } li.dropdown:hover .dropdown-content { display:block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 10; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content:hover { background-color: #f1f1f1 } .dropdown:hover .dropdown-content { display: block; } .content { margin-top: 75px; }

 <!DOCTYPE html> <html> <head> <title>MIE - About Us</title> <link rel="stylesheet" type="text/css" href="Index.css"> <link rel="stylesheet" type="text/css" href="topNav.css"> <!-- <link href="https://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet"> --> </head> <h1>Money Isn't Everything</h1> <body> <ul class = "topnav"> <h3> <li class = "topmenu"><img src = "logomain.png" style = "width:150px;height:64px;"></li> <li class = "topmenu"><a href="index.html">Home</a></li> <li class = "topmenu"><a href="context.html">Context</a></li> <li class = "topmenu"><a href="countryExamples.html">Country Examples</a></li> <li class = "topmenu"><a href="takeTheTest.html">Take the Test </a></li> <li class = "topmenu"><a href="loginSignup.html">Login/Signup</a></li> <li class = "topmenu"><a href="aboutUs.html">About Us</a></li> <li class = "topmenu dropdown"> <a href="javascript:void(0)" class="dropbtn">Help</a> <div class="dropdown-content"> <a href="#">FAQ</a> <a href="#">Contact</a> </div> </li> </h3> </ul> <div class="content"> <p>ABOUT US</p> <p>information on us (NAMES, SID, UNIKEY, YEAR, DEGREE)</p> </div> </body> </html>

Answer 4

Do you want something like this? 你想要这样的东西吗？

Note: Please click on full page link in the below snippet window, to see the output properly! 注意：请点击以下代码段窗口中的full page链接，正确查看输出！

 .topnav { position: fixed; top: 0; left: 0; width: 100%; list-style-type: none; margin: 0; padding: 0; background-color: #ffff00; z-index: 10; } .topmenu { float: left; font-family: 'Lato', sans-serif; } .topmenu a { display: block; color: #424242; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #c7cc00; color: white; } .dropdown:hover .dropbtn { background-color: green; } li.dropdown { display: inline-block; text-align: left; position: relative; } .dropdown-content { display: none; position: absolute; top: 100%; left: 0px; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 10; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content:hover { background-color: #f1f1f1 } .dropdown:hover .dropdown-content { display: block; } .content{ margin-top:75px; }

 <!DOCTYPE html> <html> <head> <title>MIE - About Us</title> <link rel="stylesheet" type="text/css" href="Index.css"> <link rel="stylesheet" type="text/css" href="topNav.css"> <!-- <link href="https://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet"> --> </head> <h1>Money Isn't Everything</h1> <body> <ul class="topnav"> <h3> <li class="topmenu"><img src="logomain.png" style="width:150px;height:64px;"></li> <li class="topmenu"><a href="index.html">Home</a></li> <li class="topmenu"><a href="context.html">Context</a></li> <li class="topmenu"><a href="countryExamples.html">Country Examples</a></li> <li class="topmenu"><a href="takeTheTest.html">Take the Test </a></li> <li class="topmenu"><a href="loginSignup.html">Login/Signup</a></li> <li class="topmenu"><a href="aboutUs.html">About Us</a></li> <li class="topmenu dropdown"> <a href="javascript:void(0)" class="dropbtn">Help</a> <div class="dropdown-content"> <a href="#">FAQ</a> <a href="#">Contact</a> </div> </li> </h3> </ul> <div class="content"> <p>ABOUT US</p> <p>information on us (NAMES, SID, UNIKEY, YEAR, DEGREE)</p> </div> </body> </html>

HTML / CSS顶部水平导航栏

问题描述

4 个解决方案

解决方案1
1 2017-09-16 07:04:38

解决方案2
1 2017-09-16 07:07:45

解决方案3
1 2017-09-16 07:12:22

解决方案4
0 已采纳 2017-09-16 07:07:53

HTML / CSS顶部水平导航栏

问题描述

4 个解决方案

解决方案1 1 2017-09-16 07:04:38

解决方案2 1 2017-09-16 07:07:45

解决方案3 1 2017-09-16 07:12:22

解决方案4 0 已采纳 2017-09-16 07:07:53

解决方案1
1 2017-09-16 07:04:38

解决方案2
1 2017-09-16 07:07:45

解决方案3
1 2017-09-16 07:12:22

解决方案4
0 已采纳 2017-09-16 07:07:53