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

简单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>

 

posted @ 2012-12-19 01:11  南山砍柴的  阅读(392)  评论(0)  编辑  收藏  举报