ナビゲーションバーのホームのみでliアイテムをリンクに変更すると（hefを使用）、aboutとcontactが表示されます（これらはサブメニューのないリンクです）。REgisterCompanyとBuyCompanyは表示されていません（これらはサブメニューへのリンクです）。jsfiddle.net/vaanipala/rVNQk/7にある私のコード。何が問題なのですか？
参考までに、liアイテムがリンクされていない場合、ナビゲーションバーは正常に表示されます。
ありがとうございました。
htmlコード：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Gama Corporate Services</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submenu1,#submenu2").children().hide();
$("#subsubmenu1").children("ul").hide();
$("#submenu1,#submenu2").hover(
function(){//onmouseover
$(this).children("ul").slideDown();
},
function(){//onmouseout
$(this).children("ul").slideUp();
});
$("#subsubmenu1").hover(
function(){//onmouseover
$(this).children("ul").animate({marginLeft:"130px"}).css({
"position":"absolute",
"z-index":"-1",
"width":"120px",
"display":"block"});
$(this).children("ul").show();
},
function(){//onmouseout
$(this).children("ul").animate({marginLeft:"0"}).css({"position":"absolute","z-index":"-1"});
$(this).children("ul").hide();
});
});
</script>
</head>
<body>
<div class="contentwrapper">
<div id="header">
<div id="logo">
<img src="images/logo.png" />
</div>
<!--<div id="company_name">
Gama Corporate Services Sdn Bhd
</div>-->
<div id="navbar">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li id="submenu1"><a href="a.html">Register Company</a>
<ul>
<li id="subsubmenu1"><a href="b.html">New Sendirian Berhad Registration</a>
<ul>
<li><a href="#">Company Price</a></li>
<li><a href="#">Register New Company</a></li>
<li><a href="#">Steps to Incorporate</a></li>
</ul>
</li>
</ul>
</li>
<li id="submenu2"><a href="c.html">Buy Company</a>
<ul>
<li><a href="#">Sendirian Berhad Ready Made Companies in Malaysia</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="leftcolumn">hello</div>
<div id="contentcolumn">Welcome to Gama Corporate Services.
This website is under construction</div>
<div id="rightcolumn">how ru</div>
<div id="footer">copyright gama corporate services</div>
</div><!--end contentwrapper-->
</body>
</html>
style.css
/* CSS Document */
html body{
padding:0;
margin:0 auto;
}
.contentwrapper{
width:900px;
margin-left:auto;
margin-right:auto;
height: auto !important;
}
#header{
/* height:20%;
*/ width:900px;
height:280px;
/*background-color:#009999;*/
background-image:url('../images/bg_image.jpg');
background-repeat:no-repeat;
float:left;
text-align:center;
}
#logo{
/*margin-top:15%;*/
float:left;
width:40%;
}
/*#company_name{
float:left;
font:"Times New Roman", Times, serif;
font-size:36px;
margin-top:20%;
}*/
#navbar{
/* height:10%;
*/ width:900px;
color:#ffffff;
float:left;
margin-top:2%;
padding:0;
z-index:0;
position:relative;
}
#menu{
list-style-type:none;
margin:0;
padding:0;
position:absolute;
}
#menu li{
float:left;
display:block;
width:120px;
text-align:center;
background-color:#FF0000;
padding:0;
margin:0;
}
#menu li a{
display:block;
width:120px;
text-decoration:none;
line-height:25px;
padding:0;
}
#submenu1 ul, #submenu2 ul{
float:left;
display:block;
width:120px;
padding:0;
margin:0;
}
/*#menu li ul ul li*/
#subsubmenu1 ul li
{position:relative;
left:0;
top:-30px;
background:#3399CC;
}
#leftcolumn{
float:left;
width:20%;
background-color:#FF9900;
}
#contentcolumn{
float:left;
width:60%;
background-color:#ffffff;
}
#rightcolumn{
float:left;
width:20%;
background-color:#FF9900;
}
#footer{
/* height:10%;
*/ width:inherit;
padding-top:4px;
background-color:#009999;
text-align:center;
}