Question

我有一个带有子菜单的CSS菜单。一切正常，但我右边菜单项的子菜单超出了容器。我想知道是否有办法阻止这种情况。

这是它正在做的事情： http://s28.postimg.org/dbl1vmtql/dropdown.png

这是我的代码：

<body>
<div class="container">
    <div class="header">
        &nbsp;
    </div>
    <div class="nav">
        <ul id="nav">
            <li><a href="#" title="Home"><i class="fa fa-home"></i> Home</a></li>
            <li><a href="#" title="CSS" class="active"><i class="fa fa-css3"></i> CSS</a></li>
            <li><a href="#" title="XML"><i class="fa fa-list-ul"></i> XML</a></li>
            <li><a href="#" title="Form"><i class="fa fa-pencil-square-o"></i> Form</a></li>
            <li><a href="#"><i class="fa fa-globe"></i> Connected Media</a>
        <ul>
            <li><a href="#" title="Discussion"><i class="fa fa-comments"></i> Discussion</a></li>
            <li><a href="#" title="Google Maps"><i class="fa fa-street-view"></i> Google Maps</a></li>
            <li><a href="#" title="WordPress"><i class="fa fa-wordpress"></i> WordPress</a></li>
        </ul>
            </li>
            <li><a href="#" title="HTML 5"><i class="fa fa-html5"></i> HTML 5</a></li>
            <li><a href="#"><i class="fa fa-search"></i> Research</a>
        <ul>
            <li><a href="#" title="Web Page Layout"><i class="fa fa-th-large"></i> Web Page Layout</a></li>
            <li><a href="#" title="Copyright & Privacy"><i class="fa fa-copyright"></i> Copyright & Privacy</a></li>
            <li><a href="#" title="References"><i class="fa fa-list-alt"></i> References</a></li>
        </ul>
            </li>
        </ul>
        </div>
        <div class="content">
            &nbsp;
        </div>  
</div>
</body>

这是我的CSS;

body {
    background: -webkit-linear-gradient(#E1E1E1, #D6D6D6); /* For Safari 5.1 to 6.0 */
    background: -moz-linear-gradient(#E1E1E1, #D6D6D6); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#E1E1E1, #D6D6D6); /* Standard syntax */
    background-attachment: fixed;
    margin: 0px 0px 0px 0px;
    font-family: Verdana;
    font-size: 14px;
    color: #000000;
}
.container {
    width:920px;
    margin: 0 auto;
    -webkit-box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
}
.content {
    background-color: #F6F6F6;
    padding: 5px;
    height: 910px;
    margin-left: auto;
    margin-right: auto;
}
.header {
    background-color: #F6F6F6;
    padding: 5px;
    margin-left: auto;
    margin-right: auto;
    height: 200px;
    border-bottom: 1px solid #454545;
}
.nav {
    background-color: #CCC;
    width: 920px;
    height: 30px;
    border-bottom: 1px solid #454545;
}
.nav ul { 
    list-style:none; 
    display: inline;
    -webkit-padding-start: 0px;
    line-height: 30px;
}
.nav ul li { 
    float:left; 
}
.nav ul li a { 
    padding: 6px 28px 6px 28px;
    text-decoration: none; 
    font-weight: bold ; 
    color: #000;
    letter-spacing: -0.5px; 
    -webkit-transition: background-color 1s;
    -moz-transition: background-color 1s;
    transition: background-color 1s;
}
.nav ul li a:hover { 
    background-color:#DFDFDF;
    color: #272727;
    padding: 6px 28px 6px 28px;
} 
.nav ul li a.active { 
    background: #DFDFDF;
    padding: 6px 28px 6px 28px;
}
ul#nav  ul {
  display: none;
}
ul#nav li:hover > ul {
  position: absolute;
  display: block;
  height: 30px;
  background-color: #CCC;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  border-left: 1px solid #000;
} 
ul#nav li:hover > ul li a {
  float: right;
  line-height: 30px;
  color: #000000;
  text-decoration: none;
  padding: 0 30px 0 0;
} 
ul#nav li:hover > ul li a:hover {
  color: #000000;
  text-decoration: none;
}

Answer 1

您需要使用以下内容设置主要内容容器：

position: relative;

然后使用以下方式设置最后一个子菜单：

position: absolute;
right: 0;

CSS子菜单在容器外面

1 个答案: