使用HTML和CSS的簡單下拉菜單

-3

只要將鼠標懸停在按鈕上，我希望看到下拉菜單，但是當我按下按鈕時，我只能看到其中的一半。我在代碼中做錯了什麼？使用HTML和CSS的簡單下拉菜單

代碼：

.dropdown { 
 
    position: relative; 
 
    display: inline-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); 
 
} 
 
body { 
 
    background-color: #1A1617 
 
} 
 
ul { 
 
    text-align: center; 
 
    list-style-type: 0px; 
 
    margin: 0px; 
 
    padding: 20px; 
 
    background-color: black; 
 
    overflow: hidden; 
 
} 
 
li a { 
 
    color: white; 
 
    padding: 8px 16px; 
 
    text-decoration: none; 
 
} 
 
li { 
 
    display: inline; 
 
} 
 
li a:hover { 
 
    background-color: red; 
 
    text-size: 10px; 
 
} 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
    <ul> 
 
    <li><a href="home.html">Home</a></li> 
 
    <li><a href="news.html">News</a></li> 
 
    <div class="dropdown"> 
 
     <li><a href="about.html">About</a></li> 
 
     <div class="dropdown-content"><p>Check</p></div> 
 
    </div> 
 
    </ul> 
 
</body> 
 
</html>

來源

2016-10-02 cleo master

問題：

您在ul元素，它不利用overflow: hidden允許其子女（li，div）超過他們的父母的width和height，這就是爲什麼你的下拉菜單被切斷的原因。

更正代碼：

.dropdown { 
 
    position: relative; 
 
    display: inline-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); 
 
} 
 
body { 
 
    background-color: #1A1617 
 
} 
 
ul { 
 
    text-align: center; 
 
    list-style-type: 0px; 
 
    margin: 0px; 
 
    padding: 20px; 
 
    background-color: black; 
 
    /*overflow: hidden; ← REMOVE THAT */ 
 
} 
 
li a { 
 
    color: white; 
 
    padding: 8px 16px; 
 
    text-decoration: none; 
 
} 
 
li { 
 
    display: inline; 
 
} 
 
li a:hover { 
 
    background-color: red; 
 
    text-size: 10px; 
 
} 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

<html> 
 

 
<body> 
 
    <ul> 
 
    <li><a href="home.html">Home</a></li> 
 
    <li><a href="news.html">News</a></li> 
 
    <div class="dropdown"> 
 
     <li><a href="about.html">About</a></li> 
 
     <div class="dropdown-content"><p>Check</p></div> 
 
    </div> 
 
    </ul> 
 
</body> 
 

 
</html>

來源

2016-10-02 13:25:33

我已經完全從頭開始重做本幾乎完全;有幾個與推薦的網頁設計標準相關的問題沒有被介紹，本應該是這樣的，我希望你能從我今天的工作中學到：

實際的問題與在.dropdown類中設置相對元素有關。

在這裏，在HTML5代碼，我創建：

<!DOCTYPE html> 
 
<html lang="en-UK"> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<title>Red And Black Navigation Bar</title> 
 
<style> 
 
body { 
 
    background-color: #1A1617; 
 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
 
    min-width: 320px; 
 
} 
 

 
ul { 
 
text-align: center; 
 
list-style-type: none; 
 
margin: 0; 
 
padding: 0; 
 
overflow: hidden; 
 
background-color: black; 
 
border: 1px solid white; 
 
} 
 

 
li { 
 
    display: inline; 
 
} 
 

 
li a, .dropbtn { 
 
display: inline-block; 
 
color: white; 
 
text-align: center; 
 
padding: 20px 16px; 
 
text-decoration: none; 
 
font-size: large; 
 
} 
 

 
li a:hover, .dropdown:hover .dropbtn { 
 
    background-color: red; 
 
} 
 

 
li.dropdown { 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: white; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 

 
.dropdown-content a { 
 
color: black; 
 
padding: 12px 16px; 
 
text-decoration: none; 
 
display: block; 
 
text-align: center; 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
    padding: 5px; 
 
} 
 

 
.goCenter { 
 
    text-align: center; 
 
    color: white; 
 
    font-weight: bold; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<ul> 
 
    <li><a class="achome.html">Home</a></li> 
 
    <li><a href="news.html">News</a></li> 
 
    <li class="dropdown"> 
 
    <a href="about.html" class="dropbtn">About</a> 
 
    <div class="dropdown-content"> 
 
     <p>The About Goes Here...</p> 
 
    </div> 
 
    </li> 
 
</ul> 
 

 
<p class="goCenter"></p> 
 

 
</body> 
 
</html>

來源

2016-10-02 14:29:17

使用HTML和CSS的簡單下拉菜單

回答

相關問題