1. 首页
  2. 问答
  3. HTML/CSS顶部水平导航栏

HTML/CSS顶部水平导航栏

2017-09-16 214 views
1

我需要我顶部水平导航栏的帮助。目前我有一个下拉菜单，我不知道为什么当我将鼠标悬停在上面并且下拉菜单打开时，导航栏的背景色会进一步向下延伸。有人可以帮我弄这个吗。由于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>

来源

2017-09-16 Nicholasmita

回答

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>

来源

2017-09-16 07:07:53

+1

是的！这正是我期待的。谢谢！ – Nicholasmita

+0

@Nicholasmita不客气！ –

1

刚刚从 'topnav' 去掉溢出和应用绝对位置 '.dropdown内容'

看到下面的代码片段：

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

来源

2017-09-16 07:04:38

+0

我这样做，但现在我的身体的白色背景是添加position:absolute，而不是position:relative覆盖下拉菜单。 – Nicholasmita

1

您在下拉菜单中使用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>

来源

2017-09-16 07:07:45

1

您需要在.dropdown-content

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

来源

2017-09-16 07:12:22

相关问题

 相关问题