CSS Problem [Jquery powered navigation]
well what im having is really confusing.
on Google Chrome and other browsers my navigation looks like this.
http://i1082.photobucket.com/albums/...oglechrome.png
but in Firefox
http://i1082.photobucket.com/albums/...oy/firefox.png
it pushes the body of my site. seems like its because of display block/ or float left but here is my code
Code:
#nav a{
display:inline;
}
#nav li{
float:left;
position:relative;
margin-right: 5px;
}
#nav ul {
position:absolute;
display:none;
top: 45px;
background: #F5F5F5;
font-family: Verdana;
-moz-box-shadow: 0px 1px 2px #888;
-webkit-box-shadow: 0px 1px 2px #888;
box-shadow: 0px 1px 2px #888;
-webkit-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
white-space:nowrap;
}
.CurrentHover {
background-color: #F5F5F5;
padding-top: 13px;
padding-bottom: 14px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
color: #017229;
width: auto;
}
#nav li ul a
{
height:auto;
float:left;
margin-left: 15px;
margin-right: 15px;
white-space: nowrap;
}
#nav li ul a:hover
{
border-bottom: 3px solid #008000;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
and my Jquery
Code:
function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li ").hover(function () {
$(this).find('ul:first').css({ visibility: "visible", display: "none" }).show(250);
},function(){
$(this).find('ul:first').css({ visibility: "hidden" });
});
$(" #withNav").hover(function () {
$("a#stylePatient").toggleClass("CurrentHover");
}, function () {
$("a#stylePatient").toggleClass("CurrentHover");
});
}
$(document).ready(function(){
mainmenu();
});
Re: CSS Problem [Jquery powered navigation]