Align submenu from right in ul li

Question

I am working on a wordpress menu which by default in the ul li format so I have made it to look like good looking hovering menu. But problem is that all sub-menu are appearing from left, I want them to align from right instead of left. Please take a look a my code.

 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

You can set the right property of the absolute positioned submenu. To make this work, also set the parent element to 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

You just to add three missing styles:

• .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>

what you need to add to the.submenu is "text-align: right", I modified your code

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