1. 首頁
  2. 問答
  3. HTML/CSS頂部水平導航欄

HTML/CSS頂部水平導航欄

2017-09-16 213 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

相關問題

 相關問題