<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Site de Yani Mira</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id = "banniere">
<img src="/images/banniere_site.png" alt="">
</div>
<div class="dropdown">
<button class="dropbtn">Menu^</button>
<div class="dropdown-content">
<a href="#">Accueil</a>
<a href="#">Telecharger CV</a>
<a href="#">Chaîne Youtube</a>
<a href="#">Contact</a>
<a href="#">Mes projets</a>
</div>
</div>
<div id='bienvenue'>Bienvenue sur mon Site</div>
<div id="banniere">
<img src="images/banniere_site.png" alt="">
</div>
<section>
<div id="presentation">
Je me présente je m'appelle Yani Mira
</div>
<div id="texte_section">Je suis un jeune développeur en 3ème année à l'école d"informatique
ESTIAM (Paris 20) et suis en contrat d'alternance avec la société
de consulting informatique Xenoo.
Depuis petit je suis passioné par les nouvelles technologies et
souhaite en faire mon métier.</div>
<img class="photodemoi" src="images/yani_photo_resized.jpg" alt="">
</section>
<script src="" async defer></script>
</body>
</html>@font-face {
font-family: 'freshmannormal';
src: url('polices/freshman/freshman-webfont.woff2') format('woff2'),
url('polices/freshman/freshman-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'gowaitalic';
src: url('gowa-italic-webfont.woff2') format('woff2'),
url('gowa-italic-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'gowaregular';
src: url('polices/gowa/gowa-regular-webfont.woff2') format('woff2'),
url('polices/gowa/gowa-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#bienvenue{
font-family: 'freshmannormal';
text-align: center;
border-width: 100%;
border-style: solid;
border-radius: 40px;
border-left: 40px;
border-right: 40px;
height: 100px;
height: auto;
width: 100%;
font-size: 3em;
background-color: antiquewhite;
margin-right: 20em;
}
#banniere img
{
width: 100%;
border-radius: 30px;
display: flex;
/* margin-left: 25%; */
}
#presentation{
font-family: 'gowaregular';
font-weight: bold;
font-size: 2em;
}
#text_section{
}
section{
font-family:sans-serif;
padding-right: 10em;
margin-right: 40px;
margin-left: 40px;
padding-bottom: 100px;
font-size: 2em ;
border: 10px;
border-radius: 40px;
border-style: solid ;
border-color:antiquewhite;
text-align: center;
}
.photodemoi{
border-style: solid;
border-color: antiquewhite;
height: 7em;
width: 6em;
position: relative;
bottom: 160px;
left:8.5em;
float: right;
border-radius: 20px;
}
/* Le bouton du dropdown*/
.dropbtn {
font-family: 'freshmannormal';
background-color: antiquewhite;
color: black;
padding: 16px;
font-size: 18px;
font-weight: bold;
border: none;
float: right;
margin-right: 40px;
margin-top: 1px;
}
/* Configuration du container dropdown */
/* Contenu du dropdown (qu'on a caché avec display:none) */
.dropdown-content{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
/* margin-left: 110em; */
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color:antiquewhite;
}@font-face {
font-family: 'freshmannormal';
src: url('polices/freshman/freshman-webfont.woff2') format('woff2'),
url('polices/freshman/freshman-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'gowaitalic';
src: url('gowa-italic-webfont.woff2') format('woff2'),
url('gowa-italic-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'gowaregular';
src: url('polices/gowa/gowa-regular-webfont.woff2') format('woff2'),
url('polices/gowa/gowa-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#bienvenue{
font-family: 'freshmannormal';
text-align: center;
border-width: 100%;
border-style: solid;
border-radius: 40px;
border-left: 40px;
border-right: 40px;
height: 100px;
height: auto;
width: 100%;
font-size: 3em;
background-color: antiquewhite;
margin-right: 20em;
}
#banniere img
{
width: 100%;
border-radius: 30px;
display: flex;
/* margin-left: 25%; */
}
#presentation{
font-family: 'gowaregular';
font-weight: bold;
font-size: 2em;
}
#text_section{
}
section{
font-family:sans-serif;
padding-right: 10em;
margin-right: 40px;
margin-left: 40px;
padding-bottom: 100px;
font-size: 2em ;
border: 10px;
border-radius: 40px;
border-style: solid ;
border-color:antiquewhite;
text-align: center;
}
.photodemoi{
border-style: solid;
border-color: antiquewhite;
height: 7em;
width: 6em;
position: relative;
bottom: 160px;
left:8.5em;
float: right;
border-radius: 20px;
}
/* Le bouton du dropdown*/
.dropbtn {
font-family: 'freshmannormal';
background-color: antiquewhite;
color: black;
padding: 16px;
font-size: 18px;
font-weight: bold;
border: none;
float: right;
margin-right: 40px;
margin-top: 1px;
}
/* Configuration du container dropdown */
/* Contenu du dropdown (qu'on a caché avec display:none) */
.dropdown-content{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
/* margin-left: 110em; */
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color:antiquewhite;
}@font-face {
font-family: 'freshmannormal';
src: url('polices/freshman/freshman-webfont.woff2') format('woff2'),
url('polices/freshman/freshman-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'gowaitalic';
src: url('gowa-italic-webfont.woff2') format('woff2'),
url('gowa-italic-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'gowaregular';
src: url('polices/gowa/gowa-regular-webfont.woff2') format('woff2'),
url('polices/gowa/gowa-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#bienvenue{
font-family: 'freshmannormal';
text-align: center;
border-width: 100%;
border-style: solid;
border-radius: 40px;
border-left: 40px;
border-right: 40px;
height: 100px;
height: auto;
width: 100%;
font-size: 3em;
background-color: antiquewhite;
margin-right: 20em;
}
#banniere img
{
width: 100%;
border-radius: 30px;
display: flex;
/* margin-left: 25%; */
}
#presentation{
font-family: 'gowaregular';
font-weight: bold;
font-size: 2em;
}
#text_section{
}
section{
font-family:sans-serif;
padding-right: 10em;
margin-right: 40px;
margin-left: 40px;
padding-bottom: 100px;
font-size: 2em ;
border: 10px;
border-radius: 40px;
border-style: solid ;
border-color:antiquewhite;
text-align: center;
}
.photodemoi{
border-style: solid;
border-color: antiquewhite;
height: 7em;
width: 6em;
position: relative;
bottom: 160px;
left:8.5em;
float: right;
border-radius: 20px;
}
/* Le bouton du dropdown*/
.dropbtn {
font-family: 'freshmannormal';
background-color: antiquewhite;
color: black;
padding: 16px;
font-size: 18px;
font-weight: bold;
border: none;
float: right;
margin-right: 40px;
margin-top: 1px;
}
/* Configuration du container dropdown */
/* Contenu du dropdown (qu'on a caché avec display:none) */
.dropdown-content{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
/* margin-left: 110em; */
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color:antiquewhite;
}大家好，我遇到了一个问题，我把下拉按钮放在页面的最右边(最初是最左边(，但当我把鼠标悬停在下拉按钮上时，下拉内容显示在最左边，显然我试图用左边的px移动它，它起作用了，但问题是它没有响应，如果我缩小页面，那么当我将鼠标悬停在下拉按钮上时，我再也看不到下拉内容了。
这是我的css代码：
[在此输入图像描述][1]
我用代码编辑
编辑前：[在此输入图像描述][2]
编辑前https://i.stack.imgur.com/zv2od.png编辑后：https://i.stack.imgur.com/tup88.png
看到你的屏幕截图后，我可以看出你的问题不是将你的dropbtn定义为内容的相对位置——你只将内容定义为绝对位置，默认情况下会将其放在你身体的左上角。为了修复它，尝试添加position:relative；在你的dropbtn另一件事是，当你使用float时，你必须在完成后清除它。我个人不喜欢使用float，相反，你可以将你的按钮定义为显示：块；然后给它左边的余量：auto；它将把它放在屏幕的右侧。
Hey Kevmi再次找到下面的代码供您自己考虑，并告诉我您是否需要其他
HTML
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Site de Yani Mira</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id = "banniere">
<img src="/images/banniere_site.png" alt="">
</div>
<div class="dropdown">
<button class="dropbtn">Menu^</button>
<div class="dropdown-content">
<a href="#">Accueil</a>
<a href="#">Telecharger CV</a>
<a href="#">Chaîne Youtube</a>
<a href="#">Contact</a>
<a href="#">Mes projets</a>
</div>
</div>
<div id='bienvenue'>Bienvenue sur mon Site</div>
<div id="banniere">
<img src="images/banniere_site.png" alt="">
</div>
<section>
<div id="presentation">
Je me présente je m'appelle Yani Mira
</div>
<div id="texte_section">Je suis un jeune développeur en 3ème année à l'école d"informatique
ESTIAM (Paris 20) et suis en contrat d'alternance avec la société
de consulting informatique Xenoo.
Depuis petit je suis passioné par les nouvelles technologies et
souhaite en faire mon métier.</div>
<img class="photodemoi" src="images/yani_photo_resized.jpg" alt="">
</section>
<script src="" async defer></script>
</body>
</html>
CSS
@font-face {
font-family: 'freshmannormal';
src: url('polices/freshman/freshman-webfont.woff2') format('woff2'),
url('polices/freshman/freshman-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'gowaitalic';
src: url('gowa-italic-webfont.woff2') format('woff2'),
url('gowa-italic-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'gowaregular';
src: url('polices/gowa/gowa-regular-webfont.woff2') format('woff2'),
url('polices/gowa/gowa-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#bienvenue{
font-family: 'freshmannormal';
text-align: center;
border-width: 100%;
border-style: solid;
border-radius: 40px;
border-left: 40px;
border-right: 40px;
height: 100px;
height: auto;
width: 100%;
font-size: 3em;
background-color: antiquewhite;
margin-right: 20em;
position:absolute;
top:1%;
left:0;
z-index:-1;
}
#banniere img
{
width: 100%;
border-radius: 30px;
display: flex;
/* margin-left: 25%; */
}
#presentation{
font-family: 'gowaregular';
font-weight: bold;
font-size: 2em;
}
#text_section{
}
section{
font-family:sans-serif;
padding-right: 10em;
margin-right: 40px;
margin-left: 40px;
padding-bottom: 100px;
font-size: 2em ;
border: 10px;
border-radius: 40px;
border-style: solid ;
border-color:antiquewhite;
text-align: center;
margin-top:2rem;
}
.photodemoi{
border-style: solid;
border-color: antiquewhite;
height: 7em;
width: 6em;
position: relative;
bottom: 160px;
left:8.5em;
float: right;
border-radius: 20px;
}
.dropdown {
position: relative;
}
/* Le bouton du dropdown*/
.dropbtn {
display:block;
font-family: 'freshmannormal';
background-color: antiquewhite;
color: black;
padding: 16px;
font-size: 18px;
font-weight: bold;
border: none;
margin-left:auto;
margin-right:1rem;
margin-top:.1rem;
}
/* Configuration du container dropdown */
/* Contenu du dropdown (qu'on a caché avec display:none) */
.dropdown-content{
opacity:0;
position: absolute;
top: 120%;
width: 100%;
height: 0;
background-color: #f9f9f9;
/* min-width: 160px; */
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
/* padding: 12px 16px; */
/* margin-left: 110em; */
z-index: 1;
border-radius:30px;
text-align:center;
padding:1rem 0;
transform: translateY(-100vh);
transition: all .8s;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover > .dropdown-content {
opacity: 1;
height: 400%;
transform: translateY(0);
}
/* Change the background color of the dropdown button when the dropdown
content is shown */
.dropdown:hover .dropbtn {
background-color:antiquewhite;
}
在我的代码笔上查看https://codepen.io/ahamdan/pen/bGeEZegand告诉我这是不是你想要的
好的，我刚刚解决了这个问题，我只需要充分定位我的.downdown类，并放置一个位置：相对于它。很抱歉，这是我第一次问堆栈溢出的问题，感谢你的帮助。