如何将按钮的下拉菜单扩展到左侧？

debugcn 发表于 Dev

dan_boy

我正在构建一个下拉菜单，并希望打开菜单扩展到上述按钮的左侧而不是右侧。目前下拉菜单向右打开，我看不到更改它的方法。我创建了以下图片以使其更加清晰。

.button-container {
position: relative;
/*text-align: center;*/
padding: 0;
border-radius:50%; 
overflow:hidden;
width: 15%;
/*float: center;*/
}

.button-container img{width:100%; height:auto; display:block}


/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  font-weight: 600; /*Semi-Bold = 600*/ /*Bold = 700*/
  font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color:#666666;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  right: 4px;
  left: auto;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    color:#F16852;}

/* 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: #3e8e41;
}

        <div>
            <div class="dropdown">
                <div class="button-container">
                    <img src="http://www.fillmurray.com/g/300/300"/>
                </div> 
                <div class="dropdown-content">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                </div>
            </div>
        </div>

非常感谢。我很高兴做出任何澄清。

大卫

由于您的下拉菜单已经相对于父级绝对定位.button-container，因此您只需添加即可从右侧扩展

.dropdown-content
{
    right: 0;
}

我还添加了一些更改以将您的图标移到右侧以与示例图像匹配：

.button-container
{
    display: inline-block;
}

.dropdown
{
    text-align: right;
}

.dropdown-content
{
    text-align: left;
}

.button-container {
position: relative;
display: inline-block;
/*text-align: center;*/
padding: 0;
border-radius:50%; 
overflow:hidden;
width: 15%;
/*float: center;*/
}

.button-container img{width:100%; height:auto; display:block}


/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  text-align: right;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: white;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  text-align: left;
}

/* Links inside the dropdown */
.dropdown-content a {
  font-weight: 600; /*Semi-Bold = 600*/ /*Bold = 700*/
  font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color:#666666;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  right: 4px;
  left: auto;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    color:#F16852;}

/* 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: #3e8e41;
}

<div>
            <div class="dropdown">
                <div class="button-container">
                    <img src="http://www.fillmurray.com/g/300/300"/>
                </div> 
                <div class="dropdown-content">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                </div>
            </div>
        </div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。