ホームページ >ウェブフロントエンド >htmlチュートリアル >質問があります: ul li と書かれたナビゲーション バーにドロップダウン メニューが表示されないのはなぜですか? 皆さんありがとう_html/css_WEB-ITnose
CSS コード:
* {
margin:0;
パディング:0;
リストスタイル:なし;
}
本文{
背景:#f0f0f0;
カラー:#999;
フォントサイズ:12px;
フォントファミリー:「Lucida Grande」、Arial、サンセリフ;
行の高さ:1.5em;
オーバーフロー-y:auto;
オーバーフロー-x:自動;
}
img {
border:0;
}
a {
color:write;text-decoration:none;
bblr:expression(this.onFocus=this.blur());
概要:なし。
}
li {list-style:none;}
.logo_box{ width:399px; 高さ:100ピクセル; align:left;float:left;}
.logo_box a{font-size:1.2em;Line-height:1.8em}
.top_right{ width:500px; float:right;}
.hydl_box{ width:500px; テキスト整列:右; 高さ:12ピクセル; 行の高さ:12px; color:#999999;}
.hydl_box a{color:#999999;}
.clearfix:after {
content:".";
表示:ブロック;
高さ:0;
クリア:両方;
可視性:非表示;
}
.topNav {
位置:相対;
z インデックス:1;
高さ:40ピクセル;
行の高さ:40px;
背景: url(../images/nav_bg.JPG) repeat-x 左上;
フォントファミリー:「Lucida Grande」、Arial、サンセリフ;
フォントサイズ:12px;
}
.topNav-width {
width:1640PX;
高さ:40ピクセル;
マージン:0 自動;
}
.topNav h3 {
font-weight:normal;
フォントサイズ:12px;
}
.topNav .tnLeft {
float:left; ;
}
.topNav li {
float:left;
位置:相対的;
}
.topNav li h3 {
float:center;
フォントの太さ:標準;
フォントサイズ:12px;
}
.topNav li h3 a {
display:inline-block;
*表示:インライン;
ズーム:1;
フォントサイズ:12px;
高さ:14ピクセル;
行の高さ:14px;
パディング:13px 20px;
color:white
}
.topNav li h3 a i {
display:inline-block;
幅:8ピクセル;
高さ:5ピクセル;
余白:0 0 0 5px;
オーバーフロー:非表示;
垂直配置:中央;
フォントサイズ:12px;
行の高さ:13px;
背景:url(images/nav_bg.JPG) 0 -61px 繰り返しなし;
}
.topNav li h3 a:hover,.topNav li.on h3 a {
background:#1C86EE;
}
.topNav .welcome {
padding-right:15px;
色:白;
}
.topNav .welcome a {
color:white;
}
.topNav li ul {
表示:なし;
位置:相対的;
左:0;
ボーダー:1px solid #CDC9C9;
ボーダートップ:0;
背景:#1C86EE;
-moz-box-shadow:3px 3px 3px rgba(0,0,0,.1);
-webkit-box-shadow:3px 3px 3px rgba(0,0,0,.1);
box-shadow:3px 3px 3px rgba(0,0,0,.1);
}
.topNav li ul li {
line-height:31px;
}
.topNav li ul li a {
display:block;
色:白;
パディング:0 15px;
}
.topNav li ul li a:hover {
background:#CFCFCF;
色:白;
}
.topNav li ul li a span {
color:white;
margin-left:5px;
}
/*
.body{
位置:相対;
}
*/
.foot_box{ width:100%; 背景:url(../images/foot_bg_03.jpg) repeat-x; 高さ:36px;}
.foot_con{ 幅:1000px; マージン:0 自動; テキスト整列:右; 色:#FFF; 高さ:32ピクセル; line-height:32px;}HTML コード:
3f2bc615c447ceb20c4f69214f914370
ee93f28997d9bb9bc4b6e12eabc2ce1e
b2386ffb911b14667cb8f0f91ea547a7指標レポート6e916e0f7d1e588d4f442bf645aedb2f
99d9f8c0b1d838eeb9ddd53d0bc7b3742cacc6d41bbb37262a98f745aa00fbf0
56c6fd97ed3d2a5896927586fb5e590b2cacc6d41bbb37262a98f745aa00fbf0
a586015c911220733e5a6cecfcc3f07b
ab8b027330d8b8895c8a924a289d06d3
a3f7994505de499329818f341982b699
90c3c1b8a35e47ef2eeea6dfa4ae2794
问题比多、一列举、仅提供。
1. js で使用される方法には問題があり、不正な登録が行われています。 li、または子コレクション上で少标志クラス。
// jQuery(".topNav").slide({ type:"menu", titCell:"dd", targetCell:"ul", delayTime:0,defaultPlay:false,returnDefault:true }); jQuery(".topNav").slide({ type:"menu", titCell:".m", targetCell:".sub", effect:"slideDown", delayTime:300, triggerTime:100,returnDefault:true });
<ul> <li class="m"><h3><a href="main.jsp">Home Page</a></h3></li> <li class="m"><h3><a>Report Management</a></h3> <ul class="sub"> <li><a href="../jsp/getsmetricreport">Weekly</a></li> <li><a href="../jsp/getsmetricreportmonth">Monthly</a></li> </ul>