在 html CSS 中匹配下拉按钮和下拉内容时出现问题
Problem matching dropdown button and dropdown content in html CSS
<!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 定义为你的内容的相对位置你只将内容定义为绝对位置这将默认将它放在你的左上角 body.
为了修复它尝试添加 position : relative;在你的 dropbtn
另一件事是当你使用浮动时你必须在你完成后清除它我个人不喜欢使用浮动而不是你可以将你的按钮定义为 display:block;然后给它 margin-left:auto;它会将其放置在屏幕的右侧。
好的，我刚刚解决了这个问题，我只需要适当地定位我的 .dropdown class，并在其中放一个 position:relative。
对不起 post 的坏人，这是我第一次提出有关堆栈溢出的问题，感谢您的帮助。
嘿 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/bGeEZeg然后告诉我这是否是你想要的
<!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 定义为你的内容的相对位置你只将内容定义为绝对位置这将默认将它放在你的左上角 body. 为了修复它尝试添加 position : relative;在你的 dropbtn 另一件事是当你使用浮动时你必须在你完成后清除它我个人不喜欢使用浮动而不是你可以将你的按钮定义为 display:block;然后给它 margin-left:auto;它会将其放置在屏幕的右侧。
好的，我刚刚解决了这个问题，我只需要适当地定位我的 .dropdown class，并在其中放一个 position:relative。 对不起 post 的坏人，这是我第一次提出有关堆栈溢出的问题，感谢您的帮助。
嘿 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/bGeEZeg然后告诉我这是否是你想要的