Html CSS子菜单在容器外部_Html_Css

Html CSS子菜单在容器外部

html css

Html CSS子菜单在容器外部,html,css,Html,Css,我有一个带有子菜单的CSS菜单。一切正常，但我右侧菜单项上的子菜单位于容器外部。我想知道是否有办法防止这种情况下面是它正在做的事情：这是我的密码： <body> <div class="container"> <div class="header">   </div> <div class="nav"> <ul id="nav">

我有一个带有子菜单的CSS菜单。一切正常，但我右侧菜单项上的子菜单位于容器外部。我想知道是否有办法防止这种情况

下面是它正在做的事情：

这是我的密码：

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

您需要将主内容容器设置为：

position: relative;

然后使用以下选项设置最后一个子菜单的样式：

position: absolute;
right: 0;

你能在这里摆出一个JSFIDLE的姿势或使用“代码片段”特性，这样我们就可以看到你得到了什么？您当前发布的代码与您链接的屏幕截图不一样。很抱歉，我已经为导航添加了剩余的CSS。问题解决了吗？您可以将最后一个子菜单的绝对正确位置设置为0。您的主内容容器需要有position:relative，然后最后一个子菜单可以绝对正确定位。

position: absolute;
right: 0;