子导航显示问题

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。

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

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

$('#txtpass').keyup(function(){
    if($(this).val().length < 6){
        $("span").show();
    }
    else if($(this).val().length >= 6){
       $("span").hide();
    }
});

我还修改了这部分（子菜单定位所需），我添加了#navigation li ul { display: none; background: #ddd; } #navigation li:hover ul { width: 100%; display: inline-block; position: absolute; top: 100%; left: 1px; } 样式。

position: relative