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

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

Question

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>
Was it helpful?

Solution

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!

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top