CSS：菜单元素定位

Question

上面的图片是我html的结果：

<div id='navi'>
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>
            <a...>Item 5</a>
            <ul>
                <li><a...>Link 1</a></li>
                <li><a...>Link 2</a></li>
                <li><a...>Link 3</a></li>
                <li><a...>Link 4</a></li>
            </ul>
        </li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
   </ul>
</div>

链接1,2等是菜单元素，在这种情况下是菜单＆＃34;项目5＆＃34;。为了使它们垂直对齐，它们的宽度<1。 li＆gt; s设定为100％。但正因为如此，所有菜单元素都覆盖整个空间，从左边缘开始。我需要他们在这种情况下开始＆＃34;项目5＆＃34;，或者鼠标现在悬停的任何菜单。 你能帮忙吗？

感谢。

CSS：

#navi ul {
list-style: none;
margin: 0 0 0 58px; }

#navi li {
float: left;
padding: 5px 6px 5px 10px;
height: 33px;
font-size: 20px;
background-position: right 18px;
background-repeat: no-repeat;
overflow: hidden; /* if text-resize, this'll keep the nav the same size */}

#navi li:last-child {
background-image: none;
} 

#navi li a {
display: block;
line-height: 24px;
overflow: hidden;       
color: #002665;}

#navi li:hover {
background:black;
}

#navi li ul {
display:none;
}

#navi li:hover ul {
display:block;
position:absolute;
top:100%;
left:0px;
width:100%;
color:white;
}
#navi li ul li {
position:relative;
width:100%;
padding:15px 0px;
background:black;
text-indent:10px;
font-size: 14px;
font-family: "helveticaregular","HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
z-index: 1;
}

#navi li ul li img:hover,#navi li ul a:hover li img{
border-bottom:1px white solid;
margin-bottom:-1px;
}
#navi li ul li:hover {
background:black;
text-decoration:underline;
}
#navi ul li a{
color:#F5F5F5;
background-color: transparent;
font-size: 20px;
font-family: "Arial Narrow", Helvetica, "helveticaregular","HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Lucida Grande", sans-serif; 
}

Answer 1

看来你想制作一个下拉菜单？ 你需要做的是将第二级ul位置设置为绝对值。

ul li ul {
     position: absolute;
}

父容器的位置需要设置为relative

Answer 2

你可以像这样制作上层div吗？这可能有所帮助。 <li><div>Item mark up here.</div></li>