How to remove left hand border on hover bar while keeping indented text

StackOverflow https://stackoverflow.com/questions/17849996

Вопрос

I would like to keep the menu text indented as is, however I'd like the bar that appears on the hover to extend all the way to the left as it does to the right, so that there is no margin (right now there is a gap on the left). Is this possible?

Appreciated.

jsfiddle: http://jsfiddle.net/xcgjR/29/

CSS

    body {
    background-color: #cccccc;
    }

#mainmenu {
  margin: 0;
  list-style-type: none;
  position: relative;  
     padding-left: 60;
  }

#mainmenu li {
  clear: left;
   position:relative;
   }

#mainmenu a {
  display: block;
  overflow: hidden;
  float: left;
 width:100%;
  position:relative;
    opacity: 1;
    -webkit-transition: all 0.4s ease-in-out;
    padding-left:32px;
    line-height: 42px;
}

#mainmenu > li:hover > a {
  background-position: 0 0;
  background-color:clear;
  background-color:rgba(255,255,255,0.5);
   width:100%;
   \
 opacity: 0;
    -webkit-transition: none;
}

#mainmenu li.active a {
  background-position: 0 0;
  background-color:clear;
    width:100%;  
}

.submenu {
  list-style-type: none; 
  float: left;
  display: none;
  position:absolute;
  left: 90px;
  top:0px;
  width: auto;
}

#mainmenu li a:hover + .submenu, .submenu:hover {
  display:block;
} 

.submenu li {
  display: inline-block; 
  clear: none !important;
}

.submenu li a {
  float: right;
  margin-left: 10px;  
}


/*repeat each of these with new name like submenu3 or submenu4, when adding a new submenu */

.submenu2 {
  list-style-type: none; 
  float: left;
  display: none;
  position:absolute;
  left: 86px;
  top:0px;
  width: auto;
}


#mainmenu li a:hover + .submenu2, .submenu2:hover {
  display:block;
} 

.submenu2 li {
  display: inline-block; 
  clear: none !important;
}

.submenu2 li a {
  float: right;
  margin-left: 10px;  
}


/*end of codes that need to be copied when adding a new submenu*/ 

.maintextcolour {
    font-family: LetterGothic, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color:#FFF;
    text-decoration: none;
    padding-top:11px;
    cursor: url(cart3.png), auto;
}


.subtextcolour {
    font-family: LetterGothic, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color:#FFF;
    text-decoration: none;
    padding-top:11px;
    cursor: url(cart3.png), auto;
}

.subtextcolour:hover {
    font-family: LetterGothic, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color:#666;
    text-decoration: none;
    padding-top:11px;
    cursor: url(cart3.png), auto;
}

#container {
    position: relative;
    min-height: 100%;   
}


@font-face {
    font-family: LetterGothic;
    src: url('LetterGothicStd.otf');
}

HTML

<body>

<div id="container">

<header>

<div align="left">
<a href="Kelly5.html" style="text-decoration:none"><span class="headertext">title </span>
<span class="headertextgreen">HERE</span></a><p><br /></div>

</header>


<nav>
     <ul id="mainmenu">

       <li id="liHome"><a href="#item-x1y1" class="maintextcolour" rel="none" id="Home">INFO</a></li>


        <li id="liServices" class="active"><a href="#item-x1y2" class="maintextcolour" rel="SubMenuY2" id="Services">EXHIBITIONS</a>
             <ul id="SubMenuY2" class="submenu">
                 <li><a href="current.html" class="subtextcolour">CURRENT</a></li>
                 <li><a href="previous.html" class="subtextcolour">PREVIOUS</a></li>     
             </ul></li>


         <li id="liEnvironment">
             <a href="#item-x1y3" class="maintextcolour" rel="none" id="Environment">CV</a>
         </li> 


</nav>

     </div>

</body>
Это было полезно?

Решение

Yes is possible. First of all you need to remove the default padding from the tag and than add it to the hyperlink tag so it will show you in full width. There is the code as well:

http://dabblet.com/gist/6077264

#mainmenu {
 margin: 0;
 list-style-type: none;
 position: relative;  
 padding-left: 0;
}

#mainmenu a {
 display: block;
 overflow: hidden;
 float: left;
 width:100%;
 position:relative;
 opacity: 1;
 -webkit-transition: all 0.4s ease-in-out;
 line-height: 42px;
 padding-left:32px; /* add as many pixels here! as you want */
}

Hope it helps!

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top