HTML / CSS顶部水平导航栏

时间：2017-09-16 07:01:17

标签： javascript html css

我的顶部水平导航栏需要帮助。目前我有一个下拉菜单，我不知道为什么当我将鼠标悬停在它上面并且下拉列表打开时，导航栏的背景颜色会进一步向下延伸。有人可以帮我弄这个吗。感谢

这是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>

4 个答案:

答案 0 :(得分：1)

只需从'topnav'中删除溢出并将绝对位置应用于'。dropdown-content'

请参阅以下代码段：

.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>

答案 1 :(得分：1)

您在下拉列表中使用position:relative，因此导航栏会显示黄色。

.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>

答案 2 :(得分：1)

您需要在position:absolute

中添加position:relative而不是.dropdown-content

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

你想要这样的东西吗？

注意：请点击以下代码段窗口中的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>

相关问题
最新问题