-PR-
  • すぐに回答を!
  • 質問No.6942632
解決
済み

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

  • 閲覧数116
  • ありがとう数1
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 54% (6/11)

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

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

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

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

(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;
}
  • 回答数1
  • 気になる数0

質問者が選んだベストアンサー

  • 回答No.1
レベル10

ベストアンサー率 59% (64/108)

マウスオーバーの時には出したいってこと?
ゴールは何?
お礼コメント
majunian

お礼率 54% (6/11)

自己解決しました。
ありがとうございました。
投稿日時 - 2011-08-30 09:03:22
  • ありがとう数0
-PR-
-PR-
  • 回答数1
  • 気になる数0
このQ&Aで解決しましたか?

関連するQ&A

-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


-PR-

ピックアップ

-PR-
ページ先頭へ