絶対位置とフローティングの問題、解決を手伝ってください_html/css

絶対位置とフローティングの問題、解決を手伝ってください_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 09:37:18

オリジナル

829 人が閲覧しました

<style type="text/css">#left-content{	float:left;	border:solid 1px #E6E6E6;	padding: 10px 10px;	width:109px;	border-right:1px solid #f0f5ff;}#left-content ul li a.selected{background:url(images/7.png) 0 0 no-repeat; color: #000;}#left-content ul li a.selected:hover { color: #F00; }#left-content ul { list-style: none; margin: 0px; }#left-content ul li { padding: 0px; height: 29px; line-height: 29px; position:relative; }#left-content ul li a{ display:block; width:89px; height:29px; line-height:29px; background:url(images/6.png) 0 0 no-repeat; color: #FFF; text-align:center; text-decoration: none; }#left-content ul li a:hover { color: #F00; }#left-content ul li ul { display:none; position: absolute; left: 90px; top: 0px; width:89px; border-bottom:none; }#left-content ul li.current ul { display:block;}#left-content ul li:hover ul { display:block;}#left-content ul li ul li a{ display:block; width:89px; height:29px; line-height:29px; background:url(images/8.png) 0 0 no-repeat; color: #000; text-align:center; text-decoration: none; }#left-content ul li ul li a:hover { color: #F00; }</style><body><div id="left-content">		<ul>			<li><a href="#">快运单打印</a>				<ul>					<li><a href="tb/main.jsp?shop=0">泉汇来</a></li>					<li><a href="tb/main.jsp?shop=1">美的小家电</a></li>				</ul>			</li>			<li><a class="selected" href="index.jsp">淘宝订单拣货</a></li>			<li><a href="#">淘宝订单发货</a>				<ul>					<li><a href="tb/send.jsp?shop=0">泉汇来</a></li>					<li><a href="tb/send.jsp?shop=1">美的小家电</a></li>				</ul>			</li>			<li><a href="javascript:newWindow('search.jsp')">销售商品统计</a></li>		</ul>	</div></body>

ログイン後にコピー

このコードを実行すると、ページが非常に長くて画面の長さを超える場合、ページをスクロールすると div 全体がスクロールし、マウスをホバーすると div コンテンツが完全に消えてしまうことがわかります。 cssがうまく書かれておらず、位置合わせの理由はですが、変更できないので、神に助けを求めてください。