子菜单颜色问题

我正在使用this button drop down位于此处。我需要使它看起来像下面的图片子菜单颜色问题

，当你将鼠标悬停在下拉其与button我怎样才能使它刷新到右侧而不是左侧的左侧齐平。

*.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
.dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 
.dropdown:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
}

<div class="dropdown"> 
 
    <button class="dropbtn">Dropdown</button> 
 
    <div class="dropdown-content"> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <a href="#">Link 3</a> 
 
    </div> 
 
</div>

来源

2016-07-04 Amoro

'浮动：right'？ –

马克B我已经尝试添加浮动权..没有结果 – Amoro

添加图片，我希望它看起来 – Amoro

你只需要添加right:0到dropdown-content，因为默认情况下，它position:absolute对齐到左（如left:0）

.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
/* demo */ 
 
    left: 300px 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    right: 0 
 
} 
 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
.dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 
.dropdown:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
}

<div class="dropdown"> 
 
    <button class="dropbtn">Dropdown</button> 
 
    <div class="dropdown-content"> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <a href="#">Link 3</a> 
 
    </div> 
 
</div>

来源

2016-07-04 21:34:47 dippas

添加dir="rtl"属性您下拉DIV将解决您的问题。

<div class="dropdown" dir="rtl">

检查here如果这是你想要的结果？

来源

2016-07-04 21:33:56 ArMikael

这是不正确的 – dippas

此外，我建议你不要在CSS中使用*。这是非常昂贵的资源，并为浏览器增加不必要的工作。至少在你的CSS中，你肯定应该排除它。 – ArMikael

子菜单颜色问题

回答

相关问题