0

I have a navigation that I have styled as I like, but there is a small flash as you go over the border, where the background hover effect still applies but the text color change does not. I have tried various ways of resizing the "a" element (which triggers the text change), and it always stays within the border area no matter how I resize it. I have also tried adding the color change to the li:hover section with no effect.

Here is the nav bar:

<div id="leftmenu">
    <ul id="sidenav">
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 2</a></li>
        <li><a href="">Link 3</a></li>
    </ul>
</div>

And this is the CSS (probably overly complex - I have tried lots of different things that didn't seem to make a difference and didn't remove them all):

#leftmenu{
    float: left;
    width: 300px;
    margin: 10px 0 0 10px;
}
ul#sidenav{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
ul#sidenav li{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: solid medium #898E95;
    border-radius: 5px;
    text-align: center;
    margin: 5px 0 5px 0;
    background: #898E95;
    font-size: 11pt;
}
ul#sidenav li a{
    width: 295px;
    text-align: center;
    line-height: 25px;
    text-shadow: 1px 1px 0px #283744;
    text-decoration: none;
    font-size: medium;
    font-weight: bold;
    color: #FFF;
    display: block;
}
ul#sidenav li:hover{
    background-color: #E5ECF9;
}
ul#sidenav li a:hover{
    color: #5C5E64;
    text-shadow: none;
}
#contentright{
    margin-left: 320px;
    padding: 0 20px 0 20px;
}

Thanks for any help you can provide - this is my first question, hopefully I asked it correctly!

codingrose
  • 15,563
  • 11
  • 39
  • 58
Prosim
  • 11
  • 2

1 Answers1

0

http://jsfiddle.net/b8M6e/

The problem is created by this line

 border: solid medium #898E95;

I just removed that line and it fixes the issue.

Also, by removing that line you'll notice it makes the menu items a little smaller than what you had. To fix that add the following line to the a- like so:

 ul#sidenav li a {
     padding: 4px;
 }

updated fiddle http://jsfiddle.net/b8M6e/1/

CRABOLO
  • 8,605
  • 39
  • 41
  • 68
  • Thanks - I appreciate the help, but I wanted the border as part of the design, so when I hover on the box the border appears, in order to offset the light blue background from the white page. Do you have any other ideas? If I can't some up with anything else I could reduce the border size just to reduce the effect. – Prosim Jan 14 '14 at 01:25