-1

当您将鼠标悬停在其上时，会打开一个框。现在问题来了，我希望将框的位置固定在一个位置，因此每当您将鼠标悬停在菜单上时，框都会保持在同一位置。我希望你们理解我和当有人打开我的网页时，我希望默认选择菜单的第一个列表项。

这是我的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>

任何语言的任何答案都将得到真正的认可，并在此先感谢

4

2 回答 2

0

在这块砖中删除“位置：相对”，它会像我相信你想要的那样工作。在我看来，您的代码似乎真的很粗糙，例如，您的一些 li 标签没有结束标签，而有些则有。我还认为使用 JavaScript 和 jQuery 可以更轻松、更简洁地实现您尝试做的很多事情。

#cssmenu ul li {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    width: 150px;   
}
于 2013-06-08T09:05:20.667 回答
0

这可以通过将“内联样式”分配给您的单个“框”元素来实现，而不是第一个元素。我给了他们一个-ve 上边距。

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

这是工作演示。

于 2013-06-08T09:28:41.933 回答