子导航显示问题

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

母版页上 Select 选项卡的功能

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

房屋功能

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

搜索房屋功能

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

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

预览

这是主页运行突出显示的部分是子导航选项卡 "search houses" 在我将鼠标悬停在房屋选项卡上之前你应该看不到它。

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

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

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

当我点击搜索房子时，同样的事情发生了。我只想选房子。

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

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

Answer 1

我试了一下，请看我的fiddlehere.

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

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

#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;
}

子导航显示问题

Sub Navigation Display Issue

html

javascript

css

jquery

tabs