Hi folks
I want to implement a full CSS navbar on the top of my page. Basically, this
is a DIV with links on <li> tags shown in inline display.
Things are going right, but if I want to show a dashed border around the
links on hover, the li elements move horizontally. Hovering on the first
element shift the two remaining ones to the right, hovering on the middle
element shit the left one to the left, the right one to the right.
I cannot find a solution to stick them in place.
Cut & paste of the CSS and the HTML code :
div#navbar2
{
height:40px;
width:100%;
background-color:#336699;
text-align:center;
vertical-align:center;
padding-top:4px;
}
div#navbar2 ul
{
margin:0px;
padding:0px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:small;
color:#fff;
line-height:30px;
white-space:nowrap;
}
div#navbar2 li
{
margin-left:50px;
margin-right:50px;
border:1px solid #336699;
list-style-type:none;
display:inline;
}
div#navbar2 li a
{
text-decoration:none;
padding:7px 10px;
color:#fff
}
div#navbar2 li a:link
{
color:#fff;
}
div#navbar2 li a:visited
{
color:#ccc;
}
div#navbar2 li a:hover
{
color:#fff;
background-color:#3366ff;
border:1px dashed #ff0000;
}
<div id=navbar2>
<ul>
<li><a href="#">bouton 1</a></li>
<li><a href="#">bouton 2</a></li>
<li><a href="#">bouton 3</a></li>
</ul>
</div>
Any help for this issue would be greatly appreciated.
Regards
--
Seb