Question

我的sidenav中的内容并未停留在其容器内。它在jsfiddle中看起来不错，但在浏览器中却没有。（Firefox 17.1 Ubuntu Quantal） jsfiddle

<div id="page-wrapper">
    <div id="header"></div>
    <div id="content-wrapper">
        <div id="content">
            <h1>Title</h1>&nbsp
            <p>lipsum...</p>
        </div><!-- END content -->        

<div id="menu-wrap">
    <div id="menu">
          <ul>
             <li><a href="#">index</a>
                   <ul>
                       <li><a href="#">Item one</a></li>
                       <li><a href="#">Item two</a></li>
                       <li><a href="#">Item three in the list</a></li>
                   </ul>
              </li>
          </ul>
     </div><!-- END menu -->
</div><!-- END menu-wrap -->

    </div><!-- END content-wrap -->
    <div id="footer"></div>
</div><!-- END page-wrapper -->

CSS

h1 {
 font-size:34px;
 text-align: center;    
}

#header {
  height: 35px;
  width: 100%;
  background-color: #336699;
  position: fixed;
  top: 0px;
  z-index: 10;
}

#content-wrapper {
  position: absolute;
  top: 70px;
  bottom: 50px;
  left: 0px;
  right: 0px;
}

#content {
  width: 90%;
  float: right;
  padding-bottom: 50px;
  padding-right: 30px;
  line-height: 2em;    
}

#menu ul li {
 list-style-type: none;  
}  

 #menu ul ul {
   display:none;
   position: fixed;
}

 #menu ul ul a {
}

 #menu ul a {
  text-decoration: none;
  color: black;
}

#menu ul li:hover ul {
  display:block;
  left: 0;  
  line-height: 20px;
  width: 170px;
  height: 400px;
  background: #CCC;
  border-top-right-radius:1em;
  border-bottom-right-radius:1em;
  padding-left: 22px;
  text-align: left;
  line-height: 35px;
  padding-top:20px;
  font-size: 14px;
}

 #menu-wrap {
   position:fixed;
   top:50px;
   width: 52px;
   height: 22px;
   border-top-right-radius: 6px;
   border-bottom-right-radius:6px;
   background: rgba(181,181,181,0.5);
   text-align: center;
   padding-top: 3px;
   z-index: 0;   
}

#footer {
  height: 10px;
  width: 100%;
  background-color: green;
  position: fixed;
  bottom: 0px;
}

Answer 1

这就是你所需要的：

ul {padding: 0; margin: 0;}

sidenav内容不对齐

1 个答案: