html CSS中匹配下拉按钮和下拉内容的问题

【问题标题】：Problem matching dropdown button and dropdown content in html CSShtml CSS中匹配下拉按钮和下拉内容的问题
【发布时间】：2021-01-29 09:12:16
【问题描述】： 

<!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

【问题讨论】：

  • 为什么不是简单地粘贴代码，而是采取艰难的方式截取屏幕截图，上传它...请阅读How to Ask，而不是edit，并创建一个minimal reproducible example。
  • 请分享源代码（不是截图）
  • 我确实尝试过粘贴它，但是当我这样做时说我还不允许粘贴代码

标签： html css list button dropdown


【解决方案1】：

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/bGeEZeg上检查它并告诉我这是不是你想要的

【讨论】：

  • 我喜欢您代码上的显示，但我找到了一个解决方案，因此当将鼠标悬停在下拉列表上时，它的侵入性较小，但无论如何感谢您的回答和您的时间 Ali。
【解决方案2】：

好的，我刚刚解决了这个问题，我只需要适当地定位我的 .dropdown 类，并放置一个位置：相对于它。 抱歉，这是我第一次提出关于堆栈溢出的问题，感谢您的帮助。

【讨论】：

  • 能否分享您的 html 代码，以便我重现您的项目并调整您的需求
【解决方案3】：

看到您的屏幕截图后，我可以看出您的问题不是将您的 dropbtn 定义为您的内容的相对位置，您只需将内容定义为绝对位置，默认情况下会将其放在您身体的左上角。 为了修复它尝试添加位置：相对；在你的 dropbtn 上 另一件事是，当您使用浮动时，您必须在完成后将其清除，我个人不喜欢使用浮动，而是您可以将按钮定义为显示：块；而不是给它 margin-left:auto;它会将其放置在屏幕的右侧。

【讨论】：

  • 我将发送我的 html 页面的屏幕截图，这样您就可以看到我想要做什么，我按照您的建议做了，但我想在我的菜单按钮下显示我的列表，我需要浮动来混合它在我的横幅中。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-12-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode