CSS3 - 在悬停时水平显示div h3元素的绝对位置

Question

我试图在水平悬停时显示父h3的{​​{1}}元素 如下面的截图所示：

如果我尝试div，则所有position: absolute元素都会崩溃，这会导致另一个问题：我无法悬停并获取h3列表，因为它们已折叠

codepen url：https://codepen.io/divyar34/pen/PpjrYO

HTML：

h3

CSS：

<ul>
    <li>
        <a href="#">aaa</a>
        <div>
            <div>
                <h3>111</h3>
                <ul>
                    <li>zz1</li>
                    <li>zz2</li>
                </ul>
            </div>
            <div>
                <h3>1112</h3>
                <ul>
                    <li>zz11</li>
                    <li>zz21</li>
                </ul>
            </div>
            <div>
                <h3>1113</h3>
                <ul>
                    <li>zz1</li>
                    <li>zz2</li>
                </ul>
            </div>
        </div>
    </li>
    <li>
        <a href="#">bb</a>
        <div>
            <div>
                <h3>2220</h3>
                <ul>
                    <li>yy</li>
                    <li>yyyy</li>
                </ul>
            </div>
            <div>
                <h3>2221</h3>
                <ul>
                    <li>yy1</li>
                    <li>yyyy1</li>
                </ul>
            </div>
        </div>
    </li>
    <li>
        <a href="#">cc</a>
        <div>
            <div>
                <h3>3330</h3>
                <ul>
                    <li>ccccc</li>
                    <li>dddd</li>
                </ul>
            </div>
            <div>
                <h3>3331</h3>
                <ul>
                    <li>ccccc</li>
                    <li>dddd</li>
                </ul>
            </div>
            <div>
                <h3>3332</h3>
                <ul>
                    <li>ccccc</li>
                    <li>dddd</li>
                </ul>
            </div>
            <div>
                <h3>3333</h3>
                <ul>
                    <li>ccccc</li>
                    <li>dddd</li>
                </ul>
            </div>
        </div>
    </li>
</ul>

Answer 1

主要编辑：为OP提供有关该问题的补充信息

首先，您使用了大量嵌套div和ul，因此您应该考虑使用类来避免不必要的混淆。或者，如果使用类会影响某些功能，那么请改用 CSS Selectors 。

运行下面的工作代码段，或

Use this JSFiddle if you want to play around, further.

/* New plus Modified CSS */
/*General CSS*/
li{
    list-style-type:none;
    display:inline;
    cursor:pointer;
    float: left;
    width: auto;
    padding-left: 6px;
}
li a{
    text-decoration:none;
    padding: 5px;
    border-radius: 10px;
    color:white;
    background:rgb(0,176,240);
    border:none;
}
li a + div div,
h3 + ul li {
    border: solid 1px grey;
    display: inline-block;
    margin: 10px 2px;
    padding: 0 10px;
}
li a + div,
h3 + ul {
    padding-left:5px;
    padding-top:5px;
    position: absolute;
    left: 0;
    line-height: 40px;
    visibility: hidden;
}
/*END General CSS*/

/*Hover CSS*/
li:hover a{
    background:orange;
}
li:hover a + div,
li a + div div:hover h3 + ul {
  visibility: visible;
}
/*END Hover CSS*/
/* END New plus Modified CSS */

<ul>
    <li>
        <a href="#">aaa</a>
        <div>
            <div>
                <h3>111</h3>
                <ul>
                    <li>zz1</li>
                    <li>zz2</li>
                </ul>
            </div>
            <div>
                <h3>1112</h3>
                <ul>
                    <li>zz11</li>
                    <li>zz21</li>
                </ul>
            </div>
            <div>
                <h3>1113</h3>
                <ul>
                    <li>zz1</li>
                    <li>zz2</li>
                </ul>
            </div>
        </div>
    </li>
    <li>
        <a href="#">bb</a>
        <div>
            <div>
                <h3>2220</h3>
                <ul>
                    <li>yy</li>
                    <li>yyyy</li>
                </ul>
            </div>
            <div>
                <h3>2221</h3>
                <ul>
                    <li>yy1</li>
                    <li>yyyy1</li>
                </ul>
            </div>
        </div>
    </li>
    <li>
        <a href="#">cc</a>
        <div>
            <div>
                <h3>3330</h3>
                <ul>
                    <li>ccccc</li>
                    <li>dddd</li>
                </ul>
            </div>
            <div>
                <h3>3331</h3>
                <ul>
                    <li>ccccc</li>
                    <li>dddd</li>
                </ul>
            </div>
            <div>
                <h3>3332</h3>
                <ul>
                    <li>ccccc</li>
                    <li>dddd</li>
                </ul>
            </div>
            <div>
                <h3>3333</h3>
                <ul>
                    <li>ccccc</li>
                    <li>dddd</li>
                </ul>
            </div>
        </div>
    </li>
</ul>