reactJS 下拉菜单中的样式调整

Question

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

菜单的样式
菜单的位置

1 - 菜单样式

菜单看起来像这样：

但是当我悬停菜单时，link 和 link 本身的悬停之间存在间隙。
例如：

在这里我吸尘器 'Rename'，但样式在它下面...

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>
    );
  }
}

VerticalDots.css

.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;
}

Answer 1

https://codesandbox.io/s/cool-engelbart-tuz4y

我无法重现您的第一个问题，能否请您进一步说明您这边发生了什么？可能是您包含的其他样式导致了该问题。

关于第 2 个问题，正常的 css 规则适用于 .show-options，它是 .text-box 的 child。我不确定你想如何定位它，但一个建议是使用 flex，类似于：

.text-box {
  height: auto;
  display: flex;
  flex-direction: column
}

Answer 2

我解决了问题，一个隐藏的line-height链接到上面的3个分支
感谢您的宝贵时间！

reactJS 下拉菜单中的样式调整

Style adjustments in a reactJS dropdown Menu

html

javascript

css

menu

reactjs

1 - 菜单样式

2 - 菜单的位置