您的位置：首页 > Web前端 > CSS

简单css弹出菜单，ie8一定要在头部加<!DOCTYPE html PUBLIC 。。。不然没反应。花了一个小时才找到这个原因，mlgbd！！

2012-12-19 01:11 381 查看

简单css弹出菜单，ie8一定要在头部加以下代码，不然没反应。花了一个小时才找到这个原因，mlgbd！！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

谷歌和遨游不用加就可以显示效果。完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style>
body
{

}

/* top level menu band */
menu
{
float:left;  /* top level menu is horizontal bar */
width:max-intrinsic;
white-space:nowrap;
padding-right:100%%; /* all items sticked to the left */
margin:0;
background-color: silver;

}

menu li
{
float:left;
display: block; /* all menu items inside are blocks*/
padding: 2px 6px;
margin:0;
position:relative; /* to make our popup relative to this one */

}

menu li:hover
{
background-color:navy;
color:white;
}

menu menu
{
flow: vertical;       /* popup menus are vertically replaced */
min-width:100%;       /* at least it is caption wide */

position:absolute;  /* out of normal flow */
display:none;       /* non-visible normally */
left:-6px;          /* to compensate menu li (parent) paddings */

padding:5px 10px 10px 5px;
color:black;
border-radius: 4px;
background-color: #cae5e8;

border:1px solid
}
menu menu li
{
float:none;

}
menu > li:hover > menu
{
display: block; /* now it is visible */
}

menu menu hr
{
margin:0;
padding:0;
border:none;
border-bottom:1px solid silver;
height:0;
}

#slider-one-value
{
display:inline-block;
overflow:hidden;
width:2em;
height:1.2em;
}

</style>
</head>
<body>

<menu>
<li>
File
<menu>
<li>New</li>
<li>Open</li>
<li>Save</li>
<li>Save As</li>
<hr/>
<li>Exit</li>
</menu>
</li>
<li>
Edit
<menu>
<li>Undo</li>
<li>Redo</li>
<hr/>
<li>Cut</li>
<li>Copy</li>
<li>Paste</li>
<hr/>
<li>Select All</li>
</menu>
</li>
<li>
Dialog
<menu>
<table>
<!--<tr><th colspan=2>Here are some inputs:</th><tr>-->
<caption>Here are some inputs:</caption>
<tr><td>First:</td> <td><input type="text" /></td></tr>
<tr><td>Second:</td><td><input type="number" size=6 step=1 minvalue=0 maxvalue=100 /></td></tr>
<tr><td>Third:</td> <td><input type="checkbox" /></td></tr>
</table>
</menu>
</li>
<li>
Radio
<menu>
<li><input type="checkbox" />Check 1</li>
<li><input type="checkbox" />Check 2</li>
<hr/>
<li><input type="radio" name="r-one" />Radio 1</li>
<li><input type="radio" name="r-one" />Radio 2</li>
<li><input type="radio" name="r-one" />Radio 3</li>
<hr/>
<li><input type="hslider" name="slider-one" buddy="slider-one-value"/> value=<b id="slider-one-value"> </b>.</li>
</menu>
</li>

</menu>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航