给div增加了hover,让鼠标放在div上变大。 为什么是div的下面变高，可我想让变高的高度显示在div的上面？
麻烦看看代码哪里有问题<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title><st...
麻烦看看代码哪里有问题
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0px; padding: 0px; list-style: none; } #nav { background: url("images1/nav_bg.gif") repeat-x; height: 30px; margin-top: 200px; } #one,#two,#three{ float: left;;width: 140px;height:30px;background: #7ec638;margin-left: 1px; border-left: 1px #fff dashed; } #one{ margin-left: 20px; } #three{ border-right: 1px #fff dashed; } #one a,#two a,#three a{ text-align: center;line-height: 30px;display: block; } #one:hover{ width: 200px; height: 300px;background:#7ec638; } #two:hover{ width: 200px; height: 33px;background:#7ec638; } #three:hover{ width: 200px; height: 33px;background:#7ec638; } #main{ height: 100px;background: purple; } </style></head><body> <div id="nav"> <div id="one"><a href="#"><img src="images1/nav_products.gif"></a> </div> <div id="two"><a href="#"><img src="images1/nav_schemes.gif"></a> </div> <div id="three"><a href="#"><img src="images1/nav_contact.gif"></a> </div> <div style="clear: both"></div> </div> <div style="clear: both"></div><div id="main"></div></body></html>
我代码在浏览器上实现的是这样的
但是我想让它这样
不知道代码有什么问题 展开
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0px; padding: 0px; list-style: none; } #nav { background: url("images1/nav_bg.gif") repeat-x; height: 30px; margin-top: 200px; } #one,#two,#three{ float: left;;width: 140px;height:30px;background: #7ec638;margin-left: 1px; border-left: 1px #fff dashed; } #one{ margin-left: 20px; } #three{ border-right: 1px #fff dashed; } #one a,#two a,#three a{ text-align: center;line-height: 30px;display: block; } #one:hover{ width: 200px; height: 300px;background:#7ec638; } #two:hover{ width: 200px; height: 33px;background:#7ec638; } #three:hover{ width: 200px; height: 33px;background:#7ec638; } #main{ height: 100px;background: purple; } </style></head><body> <div id="nav"> <div id="one"><a href="#"><img src="images1/nav_products.gif"></a> </div> <div id="two"><a href="#"><img src="images1/nav_schemes.gif"></a> </div> <div id="three"><a href="#"><img src="images1/nav_contact.gif"></a> </div> <div style="clear: both"></div> </div> <div style="clear: both"></div><div id="main"></div></body></html>
我代码在浏览器上实现的是这样的
但是我想让它这样
不知道代码有什么问题 展开
2个回答
展开全部
说个思路就是，你需要用到绝对定位，
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
