Web サイトのナビゲーション バーにドロップダウン メニューがありますが、ドロップダウン メニューが表示されると、その下のコンテンツが押し出されます。 ? ? help_html/css_WEB-ITnose を問い合わせる

ナビゲーション バーのドロップダウン メニューの CSS の配置

ウェブサイトのナビゲーション バーにはドロップダウン メニューがありますが、ドロップダウン メニューが表示されると、下のコンテンツが押し下げられます。 ? ?マスターに質問してください

ディスカッションに返信（解決策）

コンテキストに関係なく、position:absolute;z-index:999;

position:absolute絶対位置を追加します。

z-index: 他のコンテンツをカバーするには、この数値が最大でなければなりません。

コンテキストに関係なく、絶対位置を設定するには、position:absolute;z-index:999;

Position:absolute をドロップダウン レイヤーの CSS に追加します。

z-index: 他のコンテンツをカバーするには、この数値が最大でなければなりません。
まだ機能しないので、ドロップダウン メニュー ul
ul{display:none;position:absolute;z-index:999;} を追加しました

さらにコードを投稿します。

さらにコードを投稿してください。
.navbar-float{list-style-type:none; border-right:1px ソリッド #406b8d; line-height:36px;}
#navbar-float-last{border:0px ソリッド #024e70}
#navbar ul{幅: 100%;位置:相対;右:1px;}
#navbar{高さ:36px; フィルター:alpha(Opacity=130);-moz-opacity:0.5;opacity:0.8;z-index:100; #024e70;}
.navbar-float{float:left; width:95px; text-align:center;}
.navbar-float a{color:white;}
.navbar-float a:hover{position:relative; top:1px;}
.navbar-float ul{display:none;position:absolute;z-index:999;}
width:150px;
text -align:left;
list-style-type:disc;
filter:alpha(Opacity=130);
不透明度:0.98;
z-index:999;
border-left:1px 実線 #024e70;



さらにコードを送ってもらえますか? js 部分はどうですか?


js 部分についてはどうすればよいですか?

<!-- 导航条开始 -->					<div id="navbar">						<ul>							<!-- 首页分类开始 -->							<li class="navbar-float">								<a href="#">首    页</a>							</li>							<li class="navbar-float">								<a href="#" id="navbar-intro">学院简介</a>								<ul>									<li><a href="#">学院概况</a></li>									<li><a href="#">历届领导</a></li>									<li><a href="#">学院领导</a></li>									<li><a href="#">办公电话</a></li>								</ul>							</li>							<!-- 首页分类结束 -->														<!-- 机构设置分类开始 -->							<li class="navbar-float">								<a href="#" id="navbar-organ">机构设置</a>								<ul>									<li><a href="#">党政管理机构</a></li>									<li><a href="#">党务机构</a></li>									<li><a href="#">行政机构</a></li>									<li><a href="#">教学机构</a></li>									<li><a href="#">系所设置</a></li>									<li><a href="#">实验室</a></li>									<li><a href="#">委员会</a></li>								</ul>							</li>							<!-- 机构设置分类结束 -->							<!-- 师资队伍分类开始 -->							<li class="navbar-float">								<a href="#" id="navbar-teachers">师资队伍</a>								<ul>									<li><a href="#">教授</a></li>									<li><a href="#">副教授</a></li>									<li><a href="#">教师名录</a></li>									<li><a href="#">博士生导师</a></li>									<li><a href="#">硕士生导师</a></li>								</ul>							</li>							<!-- 师资队伍分类结束 -->														<!-- 教育工作分类开始 -->							<li class="navbar-float">								<a href="#" id="navbar-edu">教育工作</a>								<ul>									<li><a href="#">学生工作</a></li>									<li><a href="#">本科教育</a></li>									<li><a href="#">研究生工作</a></li>								</ul>							</li>							<!-- 教育工作分类结束 -->							<!-- 质量工程分类开始 -->							<li class="navbar-float"><a href="#">质量工程</a></li>							<!-- 质量工程分类结束 -->							<!-- 学科建设分类开始 -->							<li class="navbar-float"><a href="#">学科建设</a></li>							<!-- 学科建设分类结束 -->							<!-- 科学研究分类开始 -->							<li class="navbar-float"><a href="#">科学研究</a></li>							<!-- 科学研究分类结束 -->							<!-- 招生就业分类开始 -->							<li class="navbar-float"><a href="#">招生就业</a></li>							<!-- 招生就业分类结束 -->							<!-- 合作交流分类开始 -->							<li class="navbar-float" id="navbar-float-last"><a href="#">合作交流</a></li>							<!-- 合作交流分类结束 -->						</ul>					</div>					<!-- 导航条结束 -->

javascript マウスがナビゲーション バーに移動したときにブロックするように表示属性を変更しました

435363738394041424344454647484950515253545565758596061626364656 66768697071727374

最初の ul タグは、position:relative で変更されています中の ul タグに影響しますか? 748495051525354555657585960616263646566676869707172737475767778798081828384858687888990...
ありがとうございます、マスター

ホスト、まだいますか？私もこの問題に遭遇しました、解決方法を教えていただけますか?