2

我正在为我正在处理的项目构建一个下拉菜单，但遇到了一些麻烦。它的构建使得每个子菜单的宽度和style.left由一个 JavaScript 函数设置，该函数在悬停根级菜单项时调用。当我悬停这些菜单项时，它看起来像这样：

子菜单在左侧明显偏离了相当多的像素。如果我不改变子菜单的style.left，我会得到以下内容：

这里对齐是正确的。Windows 7 和 Linux 的 Mozilla Firefox 和 Google Chrome 都出现了该故障，因此这不是与平台相关的故障。

这是产生错误的代码：

菜单.js

function show_sub_menu(cath){
    var menu_item = document.getElementById(cath)    //cath is an integer passed to the function
    var m_width = Math.floor(window.innerWidth*0.7*0.2);  //Menu is 70% of window, each item is 20% of menu
    menu_item.style.left = cath*m_width;  //Set the style.left dynamically depending on what menu item is to be displayed
                                          //This last line of code produces the error
}

菜单.css

#m_wrapper{
    position:relative;
    width:100%;
}

#menu{
    position:relative;
    width:70%;
}

#menu li{
    width:20%;
    float:left;
}

#menu div{
    position:absolute;
    width:20%;
    top:30px;
}

#menu div a{
    position:relative;
    display:block;
    padding:5px;
}

菜单.htm

<div id=m_wrapper>
    <ul id=menu>
        <li onMouseOver=show_sub_menu('0')>Item 1</li>
            <div id=0 onMouseOver=show_sub_menu('0')>
                <a href=#>Item 1.1</a>
                <a href=#>Item 1.2</a>
            </div>
        </li>
    </ul>
</div>

我这看起来很不合逻辑，因为.js 中的m_width是，对于我的屏幕设置，235px 和m_width*cath是 0。我对 JavaScript 相当陌生，所以非常感谢帮助！

4

1 回答 1

2

首先，您的列表项提前关闭，并且 ID 不应以数字开头。所以让我们清理一下：

<div id="m_wrapper">
    <ul id="menu">
        <li onMouseOver="show_sub_menu('0');">
            Item 1
            <div id="s0" onMouseOver="show_sub_menu('0');">
                <a href="#">Item 1.1</a>
                <a href="#">Item 1.2</a>
            </div>
        </li>
    </ul>
</div>

接下来让我们看看你的 CSS。由于我们想要相对于主菜单项定位您的子菜单，因此让我们将position:relative;列表项本身放在一个空间中，我们可以从中放置其他内容。

现在我们有了一个上下文，其中子菜单根据您的列表项的左上角对齐，我们真正需要的是该菜单显示在该角下方 30 像素处 - 无需左右调整。

#m_wrapper{
    position:relative;
    width:100%;
}

#menu{
    position:relative;
    width:70%;
}

#menu li{
    position:relative;
    width:20%;
    float:left;
}

#menu div{
    position:absolute;
    width:100%;
    top:30px;
    left:0;
}

#menu div a{
    display:block;
    padding:5px;
}

从这里开始，您的子菜单应该位于您需要的位置，但它一直都在显示。我们将通过添加和修改 JavaScript 来解决这个display:none;问题：#menu divdisplay

function show_sub_menu(cath){
    var menu_item = document.getElementById("s"+cath);
    menu_item.style.display = "block";
}

这应该使您的菜单出现在您需要的地方和时间。我将把消失的行为留给你。

于 2013-04-17T20:59:57.727 回答