Question

我试图创建一个非常基本的网页链接页面，排列成7列。一些链接具有子链接。我想要发生的是当鼠标停留在具有子链接的链接上时，子链接将显示在它下面并且恰好在右边（如菜单2.2所示）

我已经从各个网站拼凑了代码（我不是编码员！），而我几乎就在那里，但是如果你看一下jsfiddle，你会看到第3列出现问题（我在示例中删除了菜单）。

HTML

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

CSS

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

http://jsfiddle.net/87u27aw0/

如果我给每个子菜单它自己的绝对位置，我可以让它工作，但我确信有一个比我做的更好的方式 - 使用相对可能？哦，它必须在IE8开始工作。

提前致谢。

Graybags

CSS菜单与飞出

0 个答案: