Jack1991 Jack1991 - 1 year ago 61
Javascript Question

How can I get span to sit inside an <a> tag within a list item?

I'm trying to get the hyperlinks in my mobile menu to reach the whole width of the container, whilst allowing the submenu buttons to sit beside the parent list items on the right hand side. At the moment I am able to set the padding on the parent links so that they reach the edge of the submenu button, however the links without submenu buttons have a gap on the right hand side that isn't clickable, whereas I want it to be the full width of the container.

I've tried to change the javascript from

to try and insert the buttons into the
li a
, thinking that this would allow me to set the padding to full width, but this hasn't worked.

This is largely a cosmetic issue, because the links have a grey overlay when pressed on an apple touch screen device, and it looks strange when there's a gap at the end.

I've made a fiddle – https://jsfiddle.net/8nj5y4t1/39/

To simplify my explanation, what I'm trying to achieve is to get the pink hyperlinks to cover the full extent of the orange

Answer Source

Setting the nav.main-menu#mobile ul li a rules width to 100% will make them fill the li's width, and give the submenu-button a position: absolute will place those in its right position

Note, the absolute positioned button's parent (the li) need to have position: relative for the button to stay inside it.

Here is an update of your fiddle

jQuery(document).ready(function($) {

  $('<span class="submenu-button">+</span>').insertBefore('nav.main-menu#mobile ul li:not(.hide-mobile) ul').parent('li');

  $('.submenu-button').click(function() {


nav.main-menu#mobile {
  min-width: 300px;
  max-width: 400px;

nav.main-menu#mobile ul {
  position: relative;
  overflow: auto;
  margin: 0;
  padding: 0;
  background-color: orange;

nav.main-menu#mobile ul li {
  display: inline-block;
  position: relative;
  float: left;
  width: 100%;
  overflow-x: hidden;

nav.main-menu#mobile ul li a {
  display: inline-block;
  height: auto;
  width: 100%;
  padding: 15px 0px 15px 30px;
  font-family: Open Sans, Helvetica;
  font-size: 18px;
  background-color: pink;
  color: purple;
  letter-spacing: 0.5px;
  text-decoration: none;
  text-transform: uppercase;

.submenu-button {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  background-color: blue;
  color: white;
  padding: 15px 20px 15px 20px;

nav.main-menu#mobile ul ul {
  max-height: 0;
  width: 100%;
  transition: all 800ms;
  overflow: hidden;

nav.main-menu#mobile ul ul.open {
  max-height: 1000px;

nav.main-menu#mobile ul ul li {
  transition: 2s;

nav.main-menu#mobile ul ul li a {
  transition: 2s;
  background-color: purple;
  color: yellow;

nav.main-menu#mobile ul ul li a.open {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="main-menu" id="mobile">
  <div class="menu-header-menu-container">
    <ul id="menu-header-menu-1" class="menu">
      <li class="hide-desktop menu-item menu-item-type-post_type menu-item-object-page menu-item-1386"><a href="http://www.mywebsite.com">Link 1</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-463"><a href="http://www.mywebsite.comwork/">Link 2</a>
        <ul class="sub-menu">
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-584"><a href="http://www.mywebsite.comwork/landscapes/">Sublink 1</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-473"><a href="http://www.mywebsite.comwork/seascapes/">Sublink 2</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-478"><a href="http://www.mywebsite.comwork/macro/">Sublink 3</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-477"><a href="http://www.mywebsite.comwork/cities/">Sublink 4</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-475"><a href="http://www.mywebsite.comwork/long-exposure/">Sublink 5</a>
            <ul class="sub-menu">
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-480"><a href="http://www.mywebsite.comwork/miscellaneous/">Sublink 6</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-has-children menu-item-10"><a href="http://www.lucieaverillphotography.co.uk/about/">Link 3</a>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-464"><a href="http://www.lucieaverillphotography.co.uk/shop/">Link 4</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="http://www.lucieaverillphotography.co.uk/contact/">Link 5</a></li>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download