htmlcssdrop-down-menuhtml-listsnowrap

Background image align right of the text in the dropdown list

Basically, I want the result as shown below, which the arrow aligns to right side of the text in the drop down list.

enter image description here

But my arrow aligned to bottom for the longest text :(

enter image description here

Please ask if my explanation is not clear enough, hoping that some of you could provide me with some advice. Thanks!

FYI: I use the white-space:nowrap; to prevent the line break.

ul { list-style-type: none; margin:0; padding: 0; }
ul.detailsec { float:left; width:auto; margin:0; padding:0; list-style-type:none;}
ul.detailsec > li.maindetail { float:left; display:inline; position:relative; padding-left: 10px; }
ul.detailsec > li input.button { background-color: #39007d; width: 103px; height: 30px; border: 0; color: #fff; cursor: pointer; font-size:12px;}
ul.detailsec > li input.button:hover{ background-color: #313131;}
ul.detailsec > li.maindetail:hover ul { visibility: visible; opacity: 1; transition-delay: 0s, 0s; }
ul.detailsec li.maindetail ul { position:absolute; float:left; height:0; padding-top:1px; margin:0; right:0; visibility: hidden; opacity: 0; transition-property: opacity, visibility transition-duration: .4s, 0s; transition-delay: 0s, .4s; }
ul.detailsec ul li.subdetail a{ background-color:#ededed; border-bottom:1px solid #d9d8d8; padding: 12px; display: block; white-space:nowrap; color: #5f5d5d; font-size: 13px; font-weight: normal; font-weight:bold; text-decoration: none;  }
ul.detailsec ul li.firstrow a { padding: 8px 12px !important;}
ul.detailsec ul li.lastrow a { border-bottom:2px solid #b3b0b0 !important; }
ul.detailsec ul li.smalltxt a{ font-size: 11px !important; color:#5f5d5d !important; border:none !important;}
ul.detailsec ul li.subdetail a:hover { color:#36145f; font-weight:bold; text-decoration: none; }

.arrow_menunav{ background: url('https://image.ibb.co/krCosk/arrow_menunav.png'); width:18px; height: 11px; float:right;}
<ul class="detailsec">
  <li class="maindetail"><input class="search" name="search" type="text" value="" placeholder="Search"></li>
  <li class="maindetail"><input border="0" title="Login" type="submit" value="LOGIN" class="button">
    <ul>
      <li class="subdetail"><a href="">Individuals<div class="arrow_menunav"></div></a></li>
      <li class="subdetail"><a href="">Reg Type (ROB/ ROC/ UENO)<div class="arrow_menunav"></div></a></li>
      <li class="subdetail lastrow"><a href="">Reg Type (Others)<div class="arrow_menunav"></div></a></li>
    </ul>
  </li>
</ul>

Solution

  • This would be way easier if you did not use an extra element for that, but just applied the background to the a element itself ...

    ul { list-style-type: none; margin:0; padding: 0; }
ul.detailsec { float:left; width:auto; margin:0; padding:0; list-style-type:none;}
ul.detailsec > li.maindetail { float:left; display:inline; position:relative; padding-left: 10px; }
ul.detailsec > li input.button { background-color: #39007d; width: 103px; height: 30px; border: 0; color: #fff; cursor: pointer; font-size:12px;}
ul.detailsec > li input.button:hover{ background-color: #313131;}
ul.detailsec > li.maindetail:hover ul { visibility: visible; opacity: 1; transition-delay: 0s, 0s; }
ul.detailsec li.maindetail ul { position:absolute; float:left; height:0; padding-top:1px; margin:0; right:0; visibility: hidden; opacity: 0; transition-property: opacity, visibility transition-duration: .4s, 0s; transition-delay: 0s, .4s; }
ul.detailsec ul li.subdetail a{ background-color:; border-bottom:1px solid #d9d8d8; padding: 12px 37px 12px 12px; display: block; white-space:nowrap; color: #5f5d5d; font-size: 13px; font-weight: normal; font-weight:bold; text-decoration: none; background: #ededed url('https://image.ibb.co/krCosk/arrow_menunav.png') no-repeat top 50% right 10px; }
ul.detailsec ul li.firstrow a { padding: 8px 12px !important;}
ul.detailsec ul li.lastrow a { border-bottom:2px solid #b3b0b0 !important; }
ul.detailsec ul li.smalltxt a{ font-size: 11px !important; color:#5f5d5d !important; border:none !important;}
ul.detailsec ul li.subdetail a:hover { color:#36145f; font-weight:bold; text-decoration: none; }
    <ul class="detailsec">
  <li class="maindetail"><input class="search" name="search" type="text" value="" placeholder="Search"></li>
  <li class="maindetail"><input border="0" title="Login" type="submit" value="LOGIN" class="button">
    <ul>
      <li class="subdetail"><a href="">Individuals<div class="arrow_menunav"></div></a></li>
      <li class="subdetail"><a href="">Reg Type (ROB/ ROC/ UENO)<div class="arrow_menunav"></div></a></li>
      <li class="subdetail lastrow"><a href="">Reg Type (Others)<div class="arrow_menunav"></div></a></li>
    </ul>
  </li>
</ul>