带有弹出菜单的CSS菜单

我试图创建一个非常基本的网页链接，分成7列。有些链接有子链接。我想做的是，当鼠标停留在一个有子链接的链接上时，子链接将显示在它的正下方和右下方，如菜单2.2所示

我从不同的网站拼凑了代码我不是一个程序员！，我想我就快到了，但是如果你看一下JSFIDLE，你会发现第三列有一个问题，我在示例中删掉了菜单

HTML

如果我给每个子菜单赋予它自己的绝对位置，我就可以让它工作，但我确信有一种比我现在做的更好的方法——也许使用相对？哦，它必须在IE8之后才能工作

提前谢谢

---

灰袋

这就是你要找的吗哇，太快了！：不，差不多了，但我希望3.2和3.3保持在原来的位置，而不是向下移动。你必须使用位置：绝对，没有浮动：中心我想浮动：中心是从其他东西遗留下来的，但谢谢，我会删除它。如果我必须使用position:absolute，并且我有很多子链接，这意味着我必须为每个子链接添加不同的ul子链接？我想会有一个更简单的方法。绝对位置

<div id="container">
<ul id="menu">
    <li><h3>Menu 1</h3></li>
    <li><a href="#">1.1</a></li>
    <li><a href="#">1.2</a></li>
</ul>
<ul id="menu">
    <li><h3>Menu 2</h3></li>
    <li><a href="#">2.1</a></li>
    <li><a href="#">2.2</a>
        <ul id="sub1">
            <li><a href="#">2.2.1</a></li>
            <li><a href="#">2.2.2</a></li>
            <li><a href="#">2.2.3</a></li>
        </ul>
    </li>   
</ul>
<ul id="menu">
    <li><h3>Menu 3</h3></li>
    <li><a href="#">3.1</a>
        <ul id="sub2">
            <li><a href="#">3.1.1</a></li>
            <li><a href="#">3.1.2</a></li>
            <li><a href="#">3.1.3</a></li>
        </ul>
    </li>
    <li><a href="#">3.2</a></li>
    <li><a href="#">3.3</a></li>
</ul>

a {
    font-family: arial, helvetica, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-decoration:none;
    color:black;
    display:block;
    padding-top: 17px;     
    padding-bottom: 17px; 
    outline: 0;
}

a:visited {
    color:black;
    background-color:#fff;
}

a:hover {
    color:#fff;
    background-color:#302403;
    display:block;
}

ul {
    padding: 10px 0px 0px 0px;
    margin: 1px;
    display: inline-block;
    text-align: center;
    position:relative;
    list-style-type:none;
    float: left;
    width: 160px;
    background-color: #fff;
    height: 400px;
}

ul#sub1 {
    position: relative;
    left: 30px;
    top: -15px;
    visibility: hidden;
    height: auto;
    padding: 0;
}

ul#sub2 {
    position: relative;
    left: 30px;
    top: -15px;
    visibility: hidden;
    height: auto;
    padding: 0;
}

ul#menu li:hover #sub1  {
    visibility: visible;
    height: auto;
    z-index: 1;
    border: 2px solid;
    padding: 0;
}

ul#menu li:hover #sub2  {
    visibility: visible;
    height: auto;
    z-index: 1;
    border: 2px solid;
    padding: 0;
}