使用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的简单下拉菜单

回答

相关问题