well what im having is really confusing.
on Google Chrome and other browsers my navigation looks like this.
but in Firefox
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();
});