ページを開いた直後のサブメニューを非表示

解決済

質問者：majunian
質問日時：2011/08/14 18:35
回答数：1件

現在、個人で利用するサイトをJqueryを導入してリニューアルしようと計画しているのですが、
添付画像のように新しいページを開いた直後は、左の青いサブメニューが必ず表示されてしまいます。

("#menu ul li ul:first").hide();を入れると
消えることには消えたのですが、
それ以後サブメニューが表示されなくなってしまいました。

どなたかお分かりの方、ご助言をお願い致します。

参考までに以下にHTMLとＣＳＳのコードを記載します。

(HTML)

<html>
<head>
</head>
<body>
<div id="content">
<div id="menuWrapper" class="menuWrapper bg1">
<ul class="menu" id="menu">
<li class="bg1" style="background-position:0 0;">
<a id="bg1" href="#">Our Passion</a>
<ul class="sub1" style="background-position:0 0;">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
</ul>
</li>
<li class="bg1" style="background-position:-266px 0px;">
<a id="bg2" href="#">Our Brands</a>
<ul class="sub2" style="background-position:-266px 0;">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
</ul>
</li>
<li class="last bg1" style="background-position:-532px 0px;">
<a id="bg3" href="#">Contact</a>
<ul class="sub3" style="background-position:-266px 0;">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>

(CSS)

.menuWrapper{
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 15px;
font-style: normal;
font-weight: normal;
text-transform:uppercase;
letter-spacing: normal;
line-height: 1.45em;
position:relative;
margin:20px auto;
height:542px;
width:797px;
background-position:0 0;
background-repeat:no-repeat;
background-color:transparent;
}
ul.menu{
list-style:none;
width:797px;
}
ul.menu > li{
float:left;
width:265px;
height:542px;
border-right:1px solid #777;
background-repeat:no-repeat;
background-color:transparent;
}
ul.menu > li.last{
border:none;
}
.bg1{
background-image: url(../images/1.jpg);
}
.bg2{
background-image: url(../images/2.jpg);
}
.bg3{
background-image: url(../images/3.jpg);
}
ul.menu > li > a{
float:left;
width:265px;
height:50px;
margin-top:450px;
text-align:center;
line-height:50px;
color:#ddd;
background-color:#333;
letter-spacing:1px;
cursor:pointer;
text-decoration:none;
text-shadow:0px 0px 1px #fff;
}
ul.menu > li ul{
list-style:none;
float:left;
margin-top:-180px;
width:100%;
height:110px;
padding-top:20px;
background-repeat:no-repeat;
background-color:transparent;
}
ul.menu > li ul li{
display:none;
}
ul.menu > li ul.sub1{
background-image:url(../images/bg1sub.png);
}
ul.menu > li ul.sub2{
background-image:url(../images/bg2sub.png);
}
ul.menu > li ul.sub3{
background-image:url(../images/bg3sub.png);
}
ul.menu > li ul li a{
color:#fff;
text-decoration:none;
line-height:30px;
margin-left:20px;
text-shadow:1px 1px 1px #444;
font-size:11px;
}
ul.menu > li ul.sub1 li{
display:block;
}
ul.menu > li ul li a:hover{
border-bottom:1px dotted #fff;
}