在ul li中从右对齐子菜单

Question

我正在开发一个wordpress菜单，默认为ul-li格式，所以我把它做成了看起来很好看的悬停菜单。但问题是，所有的子菜单都是从左边出现的，我希望它们从右边对齐，而不是从左边对齐。请看一下我的密码。

body {
background: #1fc59f;
}
ul {
list-style-type: none;
padding: 0;
}
#menu-header {
display: flex;
margin: 0;
float: right;
}
.menu > li > a {
padding: 20px;
display: flex;
}
.sub-menu {
display: none;
position: absolute;
width: 150px;
}
.sub-menu > li > a {
padding: 10px 20px;
background: #fff;
display: block;
color: #333;
}
.menu > li:hover > a {
color: #fff;
background: #96DB87;
}
.menu > li:hover .sub-menu {
display: block;
}
.sub-menu > li a:hover {
color: #fff;
background: #9DDA3E;
}

<div class="menu-header-container">
<ul id="menu-header" class="menu">
<li class="menu-item">
<a href="#" aria-current="page">Nanomaterial Synthesis</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">Metal Nanoparticles</a></li>
<li class="menu-item"><a href="#">Non-Metal Nanoparticles</a></li>
<li class="menu-item"><a href="#">Nanocomposite</a></li>
<li class="menu-item"><a href="#">Carbon Nanomaterials</a></li>
</ul>
</li>
<li class="menu-item">
<a href="#">Calculator</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">Download Papers/Book Free</a></li>
<li class="menu-item"><a href="#">test 2</a></li>
</ul>
</li>
</ul>
</div>

Answer 1

您可以设置绝对定位子菜单的right属性。若要实现此操作，还可以将父元素设置为position: relative;。

body {
background: #1fc59f;
}
ul {
list-style-type: none;
padding: 0;
}
#menu-header {
display: flex;
margin: 0;
float: right;
}
.menu-item {
position: relative;
}
.menu > li > a {
padding: 20px;
display: flex;
}
.sub-menu {
display: none;
position: absolute;
right: 0;
width: 150px;
}
.sub-menu > li > a {
padding: 10px 20px;
background: #fff;
display: block;
color: #333;
}
.menu > li:hover > a {
color: #fff;
background: #96DB87;
}
.menu > li:hover .sub-menu {
display: block;
}
.sub-menu > li a:hover {
color: #fff;
background: #9DDA3E;
}

<div class="menu-header-container">
<ul id="menu-header" class="menu">
<li class="menu-item">
<a href="#" aria-current="page">Nanomaterial Synthesis</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">Metal Nanoparticles</a></li>
<li class="menu-item"><a href="#">Non-Metal Nanoparticles</a></li>
<li class="menu-item"><a href="#">Nanocomposite</a></li>
<li class="menu-item"><a href="#">Carbon Nanomaterials</a></li>
</ul>
</li>
<li class="menu-item">
<a href="#">Calculator</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">Download Papers/Book Free</a></li>
<li class="menu-item"><a href="#">test 2</a></li>
</ul>
</li>
</ul>
</div>

Answer 2

您只需要添加三种缺失的样式：

• .menu > li { position: relative }
• .sub-menu { right: 0 }
• .sub-menu > li > a { text-align: right }

body { background: linear-gradient(90deg,#1fc59f,#9DDA3E) }
ul { list-style-type: none; padding: 0 }
a { text-decoration: none; color: #000 }
/* Menu */
#menu-header { display: flex; margin: 0; float: right }
.menu > li { position: relative }
.menu > li > a { padding: 20px; display: flex }
.sub-menu { display: none; position: absolute; right: 0; width: 150px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2) }
.sub-menu > li > a { padding: 10px 20px; background: #fff; display: block; color: #333; text-align: right }
.menu > li:hover > a { color: #fff; background: #96DB87 }
.menu > li:hover .sub-menu { display: block }
.sub-menu > li a:hover { color: #fff; background: linear-gradient(90deg,#1fc59f,#9DDA3E) }

<div class="menu-header-container"><ul id="menu-header" class="menu"><li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-has-children menu-item-12"><a href="https://dheekuntal.online/" aria-current="page">Nanomaterial Synthesis</a>
<ul class="sub-menu">
<li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16"><a href="#">Metal Nanoparticles</a></li>
<li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-17"><a href="#">Non-Metal Nanoparticles</a></li>
<li id="menu-item-522" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-522"><a href="#">Nanocomposite</a></li>
<li id="menu-item-523" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-523"><a href="#">Carbon Nanomaterials</a></li>
</ul>
</li>
<li id="menu-item-190" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-190"><a href="#">Calculator</a>
<ul class="sub-menu">
<li id="menu-item-518" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-518"><a href="#">Download Papers/Book Free</a></li>
<li id="menu-item-519" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-519"><a href="#">test 2</a></li>
</ul>
</li>
</ul></div>

Answer 3

body{background:linear-gradient(90deg,#1fc59f,#9DDA3E)}
ul{list-style-type:none;padding:0}
a{text-decoration:none;color:#000}
/* Menu */
#menu-header{display:flex;margin:0;float:right}
.menu > li > a{padding:20px;display:flex}
.sub-menu{display:none;position:absolute;width:150px;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); text-align: right;}
.sub-menu > li > a{padding:10px 20px;background:#fff;display:block;color:#333}
.menu > li:hover > a{color:#fff;background:#96DB87}
.menu > li:hover .sub-menu{display:block}
.sub-menu > li a:hover{color:#fff;background:linear-gradient(90deg,#1fc59f,#9DDA3E)}

<div class="menu-header-container"><ul id="menu-header" class="menu"><li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-has-children menu-item-12"><a href="https://dheekuntal.online/" aria-current="page">Nanomaterial Synthesis</a>
<ul class="sub-menu">
<li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16"><a href="#">Metal Nanoparticles</a></li>
<li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-17"><a href="#">Non-Metal Nanoparticles</a></li>
<li id="menu-item-522" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-522"><a href="#">Nanocomposite</a></li>
<li id="menu-item-523" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-523"><a href="#">Carbon Nanomaterials</a></li>
</ul>
</li>
<li id="menu-item-190" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-190"><a href="#">Calculator</a>
<ul class="sub-menu">
<li id="menu-item-518" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-518"><a href="#">Download Papers/Book Free</a></li>
<li id="menu-item-519" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-519"><a href="#">test 2</a></li>
</ul>
</li>
</ul></div>

您需要添加到.子菜单的是"；text align:right"；，我修改了你的代码

.sub-menu{display:none;position:absolute;width:150px;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); text-align: right;}