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

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>

score 1 · Accepted Answer · answered Jul 25 '13 at 06:08

1

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!

answered Jul 25 '13 at 06:08

Tirpox

371
1
2
13

Thanks; when I do this in jsfiddle (firefox or safari), there is still a gap on the left, also increasing the number of pixels in the padding on #mainmenu a, also creates additional space between the two submenus (ie. a larger gap between 'current' and 'previous),which I would like to avoid. http://jsfiddle.net/xcgjR/35/ – user2617190 Jul 25 '13 at 08:45
Opps I just realized that you also added margin: 0; to the body tag, this removed that gap to the left. http://jsfiddle.net/xcgjR/52/ – user2617190 Jul 25 '13 at 09:11
So now I just need a way to indent the menu text without changing the positioning between the two submenu components (current and previous). – user2617190 Jul 25 '13 at 09:33
You can accomplish that by putting a high z-index to the .submenu li and remove/change the inline-block displaying to block only. Here is the link: http://jsfiddle.net/xcgjR/53/ – Tirpox Jul 25 '13 at 16:04

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

1 Answers1