Question

有没有办法让我使用div作为下拉菜单positio，就像this一样？我已经尝试过绝对位置，但它不适用于其他屏幕尺寸。我想要的是它适用于所有屏幕分辨率。我尝试使用表格（隐藏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;
 }

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

Answer 1

好的......首先要做的事情。表是肯定的，你也不需要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;
}

我已经为您提供了一个工作示例here。正如您所看到的，这将适用于移动设备。全屏链接here会调整大小以使其正常工作。

Answer 2

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

我只能建议使用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/

使用div作为重叠其他内容的下拉菜单？

2 个答案: