Javascript reactJS下拉菜单中的样式调整

我目前正在构建一个ReactJS应用程序，我需要实现一个下拉菜单。
我目前已经创建了菜单，但我需要两个元素的帮助：

• 菜单的样式
• 菜单的位置

1-菜单的样式 菜单如下所示：

但是当我浏览菜单时，链接的悬停和链接本身之间有一个间隙。
例如：


在这里，我胡佛'重命名'，但造型下它来

2-菜单的位置 简单问题：如何选择菜单在页面中的位置？ 既不相对于父元素，也不处于固定页面位置

以下是我的源代码：

VerticalDots.js

import React from "react";
import "./VerticalDots.css";

export default class VerticalDots extends React.Component {
  state = {
    status: false,
    elements: [
      "Rename",
      "Duplicate",
      "Archive",
      "Delete Permanently"
    ]
  }

  buttonClick = (e, curstat) => {
    e.stopPropagation();
    this.setState({ status: curstat });
  };

  displayElements(){
    if(this.state.status){
      return(
        <div className="show-options">
          {this.state.elements.map((value, key) => {
            return (
              <div className="data-row">{value}</div>
            );
          })}
        </div>
      );
    }
  }

  render() {
    return (
      <div className="dropdown-root">
        <div className="text-box">
          <div className="button" onClick={e => this.buttonClick(e, !this.state.status)}>
            <img src={require("../imgs/3dots-vertical.png")} alt="NotFound"/>
          </div>
          {this.displayElements()}
        </div>
      </div>
    );
  }
}

.text-box {
  width: 100px;
  height: 40px;
  position: relative;
  text-align: left;
}

.button {
  text-align: right;
  font-size: 13px;
}

.show-options {
  height: 110px;
  width: 150px;
  border: 1px solid #7A7A7A;
  border-radius: 4px;

  position: relative;
  background: #EBEBEB;
  cursor: pointer;
  overflow-y: scroll;
  overflow-x: hidden;
  z-index: 1;
}

.data-row {
  height: 20px;
  text-align: left;
  /* margin: 0px 10px 0px 10px; */
  color: #25073C;
  border-radius: 4px;
}

.data-row:hover {
  background-color: #1464F6;
  color: white;
}

.drop-text {
  margin-top: 10px;
  margin-left: 5px;
  position: absolute;
}

.column9:hover{
  background-color: red;
}

我无法重现你的第一期，你能进一步澄清你那边发生了什么吗？可能是因为您包含了导致该问题的其他样式

关于问题2，常规css规则适用于

.show options

，它是

.text box

的子项。我不确定您想如何定位它，但有一个建议是使用

flex

，类似于：

。文本框{
高度：自动；
显示器：flex；
弯曲方向：柱
}

我解决了这个问题，一个隐藏的

行高链接到了上面的3个分支。

谢谢你抽出时间
 事实上，我使用了你的密码笔，错误不在这里。。。我不知道从哪里会发生这种情况，有什么可以帮助您找到问题？您可以在父组件中查找任何css导入。此外，您可以在开发控制台中检查这些类的样式是否没有任何额外的css规则，我正在这样做！但似乎父元素“show options”的大小与子元素的大小不同，并且子元素不包含在父元素中……您是否在
上设置了
高度：auto
。文本框
？