Question

当你在它上面悬停时，一个方框打开。现在问题出现了，我希望将盒子的位置固定在一个地方，所以每当你将鼠标悬停在菜单上，盒子就会保留在同一个地方。我希望你们了解我以及当有人打开我的网页时，我希望默认选择菜单的第一个列表项。

这是我的CSS：

#cssmenu ul{
    list-style: none;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    line-height: 1;
}
#cssmenu ul {
    display: block;
    position: absolute;
    width: 150px;
    top: 500px;
    left: 900px;
}
#cssmenu ul li {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    width: 150px;   
}
#cssmenu ul li a {
    display: block;
    position: relative;
    margin: 0;
    border-top: 1px dotted #fff;
    border-bottom: 1px dotted #d9d9d9;
    padding: 11px 20px;
    width: 150px;
    font-family:  Helvetica, Arial, sans-serif;
    color: #3dafea;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 0 1px 0 #fff;
    font-size: 13px;
    font-weight: 300;
    background: #eaeaea;
}
#cssmenu ul li a:hover, #cssmenu ul li:hover a {
    color: #fff;
    background: #54cdf1;
    background: -webkit-linear-gradient(bottom, #54cdf1, #74d7f3);
    background: -ms-linear-gradient(bottom, #54cdf1, #74d7f3); 
    background: -moz-linear-gradient(bottom, #54cdf1, #74d7f3);
    background: -o-linear-gradient(bottom, #54cdf1, #74d7f3);
    border-color: transparent;
}
#cssmenu ul .has-sub a::after {
    content: '';
    position: absolute;
    top: 16px;
    right: 10px;
    width: 0px;
    height: 0px;
    border: 4px solid transparent;
    border-left: 4px solid #3dafea; 
}
#cssmenu ul .has-sub a::before {
    content: '';
    position: absolute;
    top: 17px;
    right: 10px;
    width: 0px;
    height: 0px;
    border: 4px solid transparent;
    border-left: 4px solid #fff;
}
#cssmenu ul li a:hover::after, #cssmenu ul li:hover a::after {
    border-left: 4px solid #fff;
}

#cssmenu ul li a:hover::before, #cssmenu ul li:hover a::before {
    border-left: 4px solid rgba(0, 0, 0, .25);
}
#cssmenu ul ul {
    position: absolute;
    left: 190px;
    top: -9999px;
    padding-left: 5px;
    opacity: 0;
    -webkit-transition: opacity .3s ease-in;
    -moz-transition: opacity .3s ease-in;
    -o-transition: opacity .3s ease-in;
    -ms-transition: opacity .3s ease-in;
}
#cssmenu ul li:hover ul {
    top: 0px;
    opacity: 1;
}
div.box {
    background: yellow;
    width: 200px;
    height: 200px;
    position: absolute;
}

这是HTML：

<div id='cssmenu'>
    <ul>
        <li class='has-sub'><a href='index.html'>Darksider II</a>
            <ul>
                <li class='has-sub'>
                    <div class="box"><img src='1.jpg' width='100' height='100'></div>
            </ul>
        </li>
        <li class='has-sub'><a href='#'>FIFA 13</a>
            <ul>
                <li class='has-sub'><div class='box'><img src='1.jpg' width='100' height='100'>
            </ul>
        </li>
        <li class='has-sub'><a href='#'>Hitman Absolution</a>
            <ul>
                <li><div class='box'><img src='1.jpg' width='100' height='100'></li>
            </ul>
        </li>
        <li class='has-sub'><a href='#'>Hitman Blood money</a>
            <ul>
                <li><div class='box'><img src='1.jpg' width='100' height='100'></div>
            </ul>
        </li>
        <li class='has-sub'><a href='#'>Darksiders</a>
            <ul>
                <li><div class='box'><img src='1.jpg' width='100' height='100'></div></li>
            </ul>
        </li>
    </ul>
</div>

任何语言的任何答案都会得到真正的回答，并提前致谢

Answer 1

在这个砖块中删除“position：relative”，它会像我相信你想要的那样工作。在我看来，你的代码似乎非常粗糙，你的一些li标签没有结束标签，而有些标签也是如此。我还认为使用JavaScript和jQuery可以更轻松，更清晰地实现您尝试做的很多事情。

#cssmenu ul li {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    width: 150px;   
}

Answer 2

这可以通过为您的个人“盒子”元素指定“内联样式”来实现，而不是第一个。我给了他们一个-ve top-margin。

<div id='cssmenu'>
    <ul>
        <li class='has-sub'><a href='index.html'>Darksider II</a>
            <ul>
                <li class='has-sub'>
                    <div class="box"><img src='1.jpg' width='100' height='100'></div>
            </ul>
        </li>
        <li class='has-sub'><a href='#'>FIFA 13</a>
            <ul>
                <li class='has-sub'><div class='box' style="margin-top: -38px"><img src='1.jpg' width='100' height='100'>
            </ul>
        </li>
        <li class='has-sub'><a href='#'>Hitman Absolution</a>
            <ul>
                <li><div class='box' style="margin-top: -74px"><img src='1.jpg' width='100' height='100'></li>
            </ul>
        </li>
        <li class='has-sub'><a href='#'>Hitman Blood money</a>
            <ul>
                <li><div class='box' style="margin-top: -112px"><img src='1.jpg' width='100' height='100'></div>
            </ul>
        </li>
        <li class='has-sub'><a href='#'>Darksiders</a>
            <ul>
                <li>
                    <div class='box' style="margin-top: -148px"><img src='1.jpg' width='100' height='100'></div></li>
            </ul>
        </li>
    </ul>
</div>

Here 是工作演示。

CSS中的垂直菜单定位问题

2 个答案: