0

正如您在 HTML 中看到的那样，我有以下带有下拉菜单的菜单，所有 CSS 都已准备好，我尝试使用 CSS 使其成为下拉功能，但它并不是很好，所以我正在尝试做使用 JavaScript 什么的。

我正在使用这个脚本，但由于某种原因它不起作用，我做错了什么？ 

$("ul#mainMenu li").hover(function () {
    $(this).parent().next("ul").show();
});

这是HTML

<nav>
    <ul id="mainMenu"><!--Main Menu-->
        <li class="first">
            <a href="#">Home</a>
            <ul>
                <li><a href="intro1.php">Intro 1</a></li>
                <li><a href="intro2.php">Intro 2</a></li>
                <li><a href="intro3.php">Intro 3</a></li>
                <li><a href="vision.php">Vision</a></li>
                <li><a href="contacts.php">Contacts</a></li>
                <li><a href="staff.php">Staff</a></li>
                <li><a href="use.php">Use</a></li>
                <li><a href="crisis.php">Crisis</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Basics</a>
            <ul>
                <li><a href="definition1.php">Definition 1</a></li>
                <li><a href="definition2.php">Definition 2</a></li>
                <li><a href="definition3.php">Definition 3</a></li>
                <li><a href="assess1.php">Assess 1</a></li>
                <li><a href="assess2.php">Assess 2</a></li>
                <li><a href="assess3.php">Assess 3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Need</a>
            <ul>
                <li><a href="world1.php">World 1</a></li>
                <li><a href="world2.php">World 2</a></li>
                <li><a href="world3.php">World 3</a></li>
                <li><a href="polar1.php">Polar 1</a></li>
                <li><a href="polar2.php">Polar 2</a></li>
                <li><a href="polar3.php">Polar 3</a></li>
                <li><a href="national1.php">National 1</a></li>
                <li><a href="national2.php">National 2</a></li>
                <li><a href="national3.php">National 3</a></li>
                <li><a href="alaska1.php">Alaska 1</a></li>
                <li><a href="alaska2.php">Alaska 2</a></li>
                <li><a href="alaska3.php">Alaska 3</a></li>
                <li><a href="alaska4.php">Alaska 4</a></li>
                <li><a href="fairbanks.php">Fairbanks</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Models</a>
            <ul>
                <li><a href="durkheim.php">Durkheim</a></li>
                <li><a href="joiner.php">Joiner</a></li>
                <li><a href="nami.php">NAMI</a></li>
                <li><a href="mental.php">Mental</a></li>
                <li><a href="church.php">Church</a></li>
                <li><a href="menninger.php">Menninger</a></li>
                <li><a href="weaver-wright.php">Weaver/Wright</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Approach</a>
            <ul>
                <li><a href="trees1.php">Trees 1</a></li>
                <li><a href="trees2.php">Tress 2</a></li>
                <li><a href="goals1.php">Goals 1</a></li>
                <li><a href="goals2.php">Goals 2</a></li>
                <li><a href="training1.php">Training 1</a></li>
                <li><a href="training2.php">Training 2</a></li>
                <li><a href="gas1.php">Gas 1</a></li>
                <li><a href="gas2.php">Gas 2</a></li>
                <li><a href="boat1.php">Boat 1</a></li>
                <li><a href="boat2.php">Boat 2</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Library</a>
            <ul>
                <li><a href="stories.php">Stories</a></li>
                <li><a href="books.php">Books</a></li>
                <li><a href="plays.php">Plays</a></li>
                <li><a href="epics.php">Epics</a></li>
                <li><a href="movies.php">Movies</a></li>
                <li><a href="articles.php">Articles</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Web</a>
            <ul>
                <li><a href="arctic.php">Arctic</a></li>
                <li><a href="national.php">National</a></li>
                <li><a href="supports.php">Supports</a></li>
                <li><a href="reference.php">Reference</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS：

/*Main Menu*/
#mainMenu {
    width: 750px;
    display: inline-block;
    position: relative;
    cursor: default;
}

#mainMenu li {
    display: inline-block;
}

#mainMenu li:before{
    content: "|";
    color: #606060;
    margin-right: 4px;
}

#mainMenu li:first-child:before{
    content: ''; 
}

#mainMenu a {
    color: #F2F2F2;
    padding: 15px 20px;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    -webkit-transition: background 0.2s linear;
    -moz-transition: background 0.2s linear;
    -ms-transition: background 0.2s linear;
    -o-transition: background 0.2s linear;
    transition: background 0.2s linear;
}

#mainMenu a:hover {
    color: #C7A17B; 
    background-color:rgba(51,51,51,0.5);
}   

#mainMenu a.active {
    color: #94877B;
    cursor: default;
}

/*Drop Down Menu*/
ul#mainMenu ul {
    display: none;
    background: #303030 url('../elements/texture.png') repeat;
    border: 1px solid #272626;
    position: absolute; top: 50px; right: 0; left: 0;
    padding: 10px;
    border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    -webkit-box-shadow: 0px 0px 25px -1px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 25px -1px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 25px -1px rgba(0,0,0,0.3);
}

ul#mainMenu li ul li a {
    color: #E5E5E5; 
    padding: 10px;
    margin: 2px 0;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

ul#mainMenu li ul li a:hover {
    background-color:rgba(71,71,71,0.3);
}
4

2 回答 2

0

更改以下代码

$("ul#mainMenu li").hover(function () {
    $("ul",this).show();
});
于 2013-10-10T07:43:08.657 回答
0

看你必须ul在this哪里找到thishovered li：

$("ul#mainMenu li").hover(function () {
    $("ul",this).show(); // <--show the ul in this li
});

试试这个，看看它是否能解决问题。

使用.find()：

$("ul#mainMenu li").hover(function () {
    $(this).find("ul").show(); // <--show the ul in this li
});
于 2013-10-10T07:43:15.290 回答