子导航显示问题

Question

我正在构建一个网站，其中一些标签位于顶部，其中一个标签有子导航，但我在显示方式上遇到了一些问题。

ASPX 页面

<div id="navigation">
                    <ul>
                        <li id="tab1">
                            <a href="Home.aspx">Home</a>
                        </li>
                        <li id="tab2">
                            <a href="AllHouses.aspx">Houses</a>
                            <ul>
                                <li> 
                                    <a href="Houses.aspx">Search Houses</a>
                                </li>
                            </ul>
                        </li>
                        <li id="tab3">
                            <a href="Events.aspx">Events</a>
                        </li>
                        <li id="tab4">
                            <a href="Maps.aspx">Maps</a>
                        </li>
                        <li id="tab5">
                            <a href="About.aspx">About</a>
                        </li>
                        <li id="tab6">
                            <a href="Contact.aspx">Contact</a>
                        </li>
                        <li id="tab7">
                            <a href="Links.aspx">Links</a>
                        </li>
                    </ul>
                </div>

我的子导航是房屋标签下的搜索房屋标签。

CSS

#navigation {
    background: url(../images/bg-navigation.png) no-repeat;
    clear: both;
    height: 50px;
    width: 860px;
    margin: 0 auto;
    padding: 1px;
    position: relative;
    z-index: 10;
}

    #navigation ul {
        display: inline-block;
        width: 860px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #navigation li {
        float: left;
        background-position: 0 -118px;
        background-repeat: no-repeat;
        height: 49px;
        width: 122px;
        margin: 0;
        padding-left: 1px;
        text-align: center;
    }

        #navigation li:first-child {
            background: none;
            margin-left: 0;
            padding-left: 0;
        }

        #navigation li a {
            color: #fff;
            display: block;
            font: bold 14px/48px Arial, Helvetica, sans-serif;
            height: 49px;
            text-decoration: none;
            text-transform: uppercase;
        }

            #navigation li a:hover {
                background-position: 0 -59px;
                color: #6d6157;
            }

        #navigation li.selected a {
            background-position: 0 0;
            color: #e4e1bd;
        }

在母版页上选择标签的功能

 function setCurrentTab(selectedTab) {
            $('li').removeClass('selected');
            $('[id=' + selectedTab + ']').addClass('selected');
        }

房屋功能

$(function () { setCurrentTab('tab2'); });

搜索房屋功能

$(function () { setCurrentTab('tab2'); });

它的“tab2”也是因为我希望房屋选项卡保持选中状态，而不是搜索房屋选项卡。

预览

这是运行突出显示部分的主页，是子导航选项卡“搜索房屋”，在我将鼠标悬停在房屋选项卡上之前您应该无法看到它。

我将鼠标悬停在房屋选项卡上，但子导航未显示，但它仍在突出显示的部分中。

当我向下移动到突出显示的部分时，它现在会显示搜索房屋选项卡。

当我单击房屋选项卡时，两个选项卡都被选中，我不希望我只想选择房屋选项卡。

当我点击搜索房屋时也会发生同样的情况。我只想选择房子。

• 我不希望子导航总是像第一张图片那样显示。
• 我只希望它在我将鼠标悬停在第二张图像中的房屋选项卡上时显示，但像在第三张图像中一样显示它，而不必向下移动到突出显示的部分/搜索房屋选项卡才能看到它.
• 我希望只为房屋和搜索房屋页面选择房屋标签。

我很确定这是一个样式问题，但我无法理解它。

Answer 1

我试了一下，请看我的小提琴here。

我在小提琴中使用了背景颜色，因为我无法访问您使用的图像。

对于子菜单，我添加了下面的样式，以便在悬停之前隐藏子菜单：

#navigation li ul {
    display: none;
    background: #ddd;
}
#navigation li:hover ul {
    width: 100%;
    display: inline-block;
    position: absolute;
    top: 100%;
    left: 1px;
}

我还修改了这部分（子菜单定位所需），在其中添加了position: relative 样式。

#navigation li {
    float: left;
    background-position: 0 -118px;
    background-repeat: no-repeat;
    height: 49px;
    width: 122px;
    margin: 0;
    padding-left: 1px;
    text-align: center;
    position: relative;
}