1

我有什么办法可以像这样使用 div 作为下拉菜单位置吗？我已经尝试过绝对位置，但它不适用于其他屏幕尺寸。我想要的是它适用于所有屏幕分辨率。我尝试使用表格（隐藏 td 并在悬停时显示它）但菜单只是将内容推到它下面。我迫切需要解决这个问题，我已经为此工作了数周，但仍然没有接近我想要的。先感谢您。

到目前为止我尝试了什么：jQuery：

$(document).ready(function(){
   $("#hover-here").hover(function(){
     $("#boxed-menu-div").toggle();
  });
});

CSS：

#boxed-menu-div{
  display: none;
  position: absolute;
  top: 100px;
  right: 246px;
 }

这仅适用于我的屏幕分辨率。我使用了相对定位，但它只推送下面的内容。除了 absolute 可以做什么之外，还有其他选择吗？

4

2 回答 2

2

好的...首先要做的事情。表格是绝对不行的，你也不需要 jQuery。

您有四个组合在一起的 html 元素，旨在完成此特定任务。

这些<nav>是<ul> <li>和<a>。现在我在这里做一个假设，既然你希望它适用于所有屏幕尺寸，那么你希望它具有响应性，我还假设因为你想要圆角、渐变、阴影等，那么你的目标就是现代浏览器，ie9+ 等。

记住这里将是我将用来创建菜单的 html。

<nav>
    <ul>
        <li>
            <a href="#">item 1</a>
            <ul>
                <li><a href="#">sub item 1</a><li>
                <li><a href="#">sub item 1</a><li>
                <li><a href="#">sub item 1</a><li>
            </ul>
        </li>
        <li>
            <a href="#">item 2</a>
            <ul>
                <li><a href="#">sub item 1</a><li>
                <li><a href="#">sub item 1</a><li>
                <li><a href="#">sub item 1</a><li>
            </ul>
        </li>
        <li>
            <a href="#">item 3</a>
            <ul>
                <li><a href="#">sub item 1</a><li>
                <li><a href="#">sub item 1</a><li>
                <li><a href="#">sub item 1</a><li>
            </ul>
        </li>
      </ul>
</nav>

CSS会像这样。请注意，我只创建了您所追求的非常粗略的近似值。

body{
    /* Set the overall font*/
    font-family:arial, serif;
}

/* Contain floats: h5bp.com/q */
nav > ul:before, nav > ul:after {
    content: "";
    display: table;
}

nav > ul:after {
    clear: both;
}

nav > ul {
    *zoom: 1;
}

/* Level one */
nav > ul > li {
    float:left;
    position:relative;
    overflow:visible;
    width:30%;
    max-width:100px;
}
nav > ul > li > a{
    padding:.5em 1em;
}

/* Level 2*/
nav > ul > li > ul {
    background:#666;
    border-radius: 0 5px 5px 5px;
    position:absolute;
    z-index:1;
    padding:1em;
    width:200px; /*set to whatever you need*/
    display:none;
}

/* Second list on level 2*/
nav > ul > li:nth-child(2) > ul{
    margin-left:-50%;
    border-radius: 5px;
}

/* Last list on level 2*/
nav > ul > li:last-child > ul{
    right:0;
    border-radius: 5px 0 5px 5px;
}

/* Hover level 1*/
nav > ul > li:hover {
    background:#666;
    border-radius: 5px 5px 0 0;
    color:#fff;
}

nav > ul > li:hover > ul {
    display:block;
}

nav > ul > li:hover > a,
nav > ul > li > ul a{
    color:#fff;
}

nav a {
    text-decoration:none;
    display:block;
}

我在这里提供了一个工作示例供您使用。如您所见，这将在移动设备上运行。全屏链接在这里调整大小以查看它的工作。

于 2012-12-20T11:32:38.747 回答
0

如果没有看到您的代码，很难提供帮助。

我只能建议使用 css 菜单。

<ul id="main-nav">
    <li>
        <a href="#">Menu Item</a>
        <div class="sub-nav">
            Anything
        </div>
    </li>
    ...
</ul>

CSS

#main-nav {height: 25px; list-style-type: none;}
#main-nav li {position: relative; float: left; height: 25px; line-height: 25px; margin: 0 15px 0 0;}

.sub-nav {display: none; position: absolute; width: 400px; top: 25px; left: 0; z-index: 999; background: #f2f2f2;}

#main-nav li:hover .sub-nav {display: block;}

工作示例http://jsfiddle.net/ELyQW/2/

于 2012-12-20T11:24:33.997 回答