下拉菜单关键代码

下拉菜单或移动的物体.先position:absolute 绝对定义在看不到的地方.

然后再某个东西hover时候,再绝对定位到另一个地方.鼠标下方,比如.

注意position:absolute默认相对body.也可以设置相对某一个为一个position:relative

的物体.

 

另存为 html, 运行示例.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0036)http://localhost:50272/WebForm1.aspx -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE></TITLE>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<STYLE type=text/css>DIV.hover_target:hover {
    POSITION: relative
}
DIV.hover_target:hover DIV {
    POSITION: absolute; TOP: 100px; LEFT: 100px
}
DIV.hover_target DIV {
    POSITION: absolute; TOP: -200px; LEFT: -200px
}
</STYLE>

<META name=GENERATOR content="MSHTML 8.00.7600.16700"></HEAD>
<BODY>
<FORM id=form1 method=post name=form1 action=WebForm1.aspx>
<DIV><INPUT id=__VIEWSTATE
value=/wEPDwULLTE2MTY2ODcyMjlkZCcYQSI2MZ5P28+G6eFtxsxWdZh5 type=hidden
name=__VIEWSTATE> </DIV>
<DIV>
<DIV style="BACKGROUND-COLOR: blue; WIDTH: 100px; HEIGHT: 100px"
class=hover_target>
<DIV style="BACKGROUND-COLOR: green; WIDTH: 50px; HEIGHT: 50px">Hello World!
</DIV></DIV></DIV></FORM></BODY></HTML>

create by http://www.ttcihui.com

posted @ 2011-01-11 09:46  时光的羁绊  阅读(167)  评论(0)    收藏  举报