html - 为什么我的 DIV 从页面上掉下来

Question

我有一个垂直菜单，当我向页面添加内容时，添加的内容会出现在菜单下方。我想防止内容掉落。期待这里的专家帮助。

在给定的示例中，我希望演示与我的菜单在同一行。

p, ul, li, div, nav
            {
                padding:0;
                margin:0;
            }
    
            body
            {
                font-family:Calibri;
            }
    
            #menu {
                overflow: auto;
                position:relative;
                z-index:2;
            }
    
            .parent-menu 
            {
                background-color: #0c8fff;
                width:200px;
                
            }
    
            #menu ul
            {
                list-style-type:none;
            }
    
            #menu ul li a
            {
                padding:10px 15px;
                display:block;
                color:#fff;
                text-decoration:none;
            }
    
                #menu ul li a:hover
                {
                    background-color:#007ee9;
                }
    
                #menu ul li:hover > ul {
                    left: 200px;
                    -webkit-transition: left 200ms ease-in;
                    -moz-transition: left 200ms ease-in;
                    -ms-transition: left 200ms ease-in;
                    transition: left 200ms ease-in;
                }
    
                #menu ul li > ul {
                    position: absolute;
                    background-color: #333;
                    top: 0;
                    left: -200px;
                    min-width: 200px;
                    z-index: -1;
                    height: 100%;
                    -webkit-transition: left 200ms ease-in;
                    -moz-transition: left 200ms ease-in;
                    -ms-transition: left 200ms ease-in;
                    transition: left 200ms ease-in;
                }
    
                #menu ul li > ul li a:hover
                {
                    background-color:#2e2e2e;
                }
    .content {
    padding: 12px 12px 12px 12px;
    	font-size: 0.8em;
    	line-height: 1.65em;
    
        border-left: 1px solid #bdc1a3;
            	border-right: 1px solid #bdc1a3;
     background-color:#ffffff
    }
    #dataDiv{
      float: left;border:1px solid #bdc1a3;background-color:#f3f5dc;
    }

<div class="content">   
    <div id="menu" style="overflow:hidden">
        <ul class="parent-menu">
       <li><a href='#'><span>Menu1</span></a>
          <ul>
             <li><a href='#'><span>SubMenu1</span></a></li>
            <li><a href='#'><span>SubMenu2</span></a></li>
           </ul>
            </li>   
       
       <li><a href='#'><span>LOG OUT</span></a></li>
       
    </ul>
       </div>
            <div id="dataDiv"  style="overflow:hidden">
    
    <table>
                    <tr>
                        <td style="background-color: #0C9FFF">
                            &nbsp;Demo
                        </td>
                    </tr>
                    </table> 
                        </div>

Answer 1

您的菜单位于 div 中，这是一个 block 级元素，因此它占据了其父元素的整个宽度，并将在其下方推送以下内容。

实现您想要做的事情的一种方法是将 float: left 添加到您的 #menu。