1

Glad to be out here on Stack Overflow :)

I recently implemented some Jquery fade in/fade out code for my WordPress menu. I actually used the code found here at this resource. Apparently, it seems like a piece of Jquery code that's pretty commonly used.

I was able to get it incorporated into my WordPress menus. Everything works great on the primary navs. However, the sub menus adopt the same height and Jquery effect of the primary nav which I do not want. I'd like the sub menus to be thinner and just have a simple background color change.

My question is how I can get the styles of the primary and sub navs to be independent of each other while using this great jquery script. I've pasted the relevant css code and was hoping someone might be able to offer some insight. It's based off of the standard wordpress menu css and am hoping it's pretty self-explanatory. 

#access {
    margin:0; 
    padding:0;
    list-style:none;
    line-height:60px;
}
#access ul {
    font-size: 16px;
    font-family: 'swis721_ltcn_btlight';
    text-transform:uppercase;
    list-style: none;
    margin: 0 0 0 -0.8125em;
    padding-left: 0;
    display:inline-block;
    text-align: center;
}
#access li {
    float:left; 
    background:url(images/default.jpg) no-repeat center center; /
    width:150px;    
    height: 50px;                       
    position:relative;          
}
#access li a {
    z-index:20;     
    display:block;
    position:relative;
    color:#777;
    border-right: 1px dotted #cccccc;
}

#access li .hover {
    background:url(images/over.jpg) no-repeat center center;
    position:absolute;  
    width:150px;    
    height:50px;
    left:0;
    top:0;  
    z-index:0;      
    display:none;       
}

#access ul ul {
    height: 17px !important;
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    display: none;
    float: left;
    margin: 0;
    position: absolute;
    top: 50px;
    left: 0;
    width: 150px;
    z-index: 99999;
}

#access ul ul a {
    background:#ccc;
    border-top: 1px dotted #ffffff;
    border-bottom: 1px dotted #ffffff;
    color: #FFF;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.1em;
    text-align: left;
    padding: 5px 10px;
    width: 130px;
    height: 17px;
}

#access ul ul :hover > a {
    height:17px !important;
}

Basically, when I attempt to change the sub menus styles in "#access ul ul a" or"#access ul ul :hover > a" the heights and hover effects of the primary nav carry over.

I've included a link to an example of the issue. If you hover over 'events and services' you'll see the sub menu issue.

http://streetsmartetiquette.com/wordpress/about/

Jquery Code added below as well:

jQuery(document).ready(function($) {

    //Append a div with hover class to all the LI
    $('#menu-navmenu li').append('<div class="hover"><\/div>');


    $('#menu-navmenu li').hover(

        //Mouseover, fadeIn the hidden hover class  
        function() {

            $(this).children('div').stop(true, true).fadeIn('1000');    

        }, 

        //Mouseout, fadeOut the hover class
        function() {

            $(this).children('div').stop(true, true).fadeOut('1000');   

    }).click (function () {

        //Add selected class if user clicked on it
        $(this).addClass('selected');

    });

});

Thanks all for the help!

4

2 回答 2

0

我没有太多时间，但我很快就把它放在一起：

HTML

<nav id="access">
    <div class="menu-navmenu-container">
        <ul>
            <li><a href="/">Link 1</a></li>
            <li>
                <a href="/">Link 2</a>
                <ul>
                    <li><a href="/">Sub Link 1</a></li>
                    <li><a href="/">Sub Link 2</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

CSS

#access {}
.menu-navmenu-container { width : 960px; }

#access ul {
    list-style : none;
}
#access li {
    float : left;
    position : relative;
    text-align : center;
    width : 150px;
}
#access li a {
    border-left : 1px solid #ccc;
    display : block;
    line-height : 50px;
}
#access li:last-child a { border-right : 1px solid #ccc; }
#access li a:hover {
    background-image : url("http://streetsmartetiquette.com/wordpress/wp-content/themes/clean/images/over.jpg");
}

#access ul ul {
    border-top : 1px solid #ccc;
    left : 0;
    padding : 0;
    position : absolute;
}
#access ul ul a {
    border-bottom : 1px solid #ccc;
    line-height : normal;
    padding : 5px 0;
}
#access ul ul a:hover {
    background-color : blue;
    background-image : none;
    color : white;
}

这是 fiddle 的链接。它是免费的 javascript，但如果需要，您可以实现您的 javascript。

于 2013-04-26T22:03:37.957 回答
0

嗨，我认为您的问题出在您的 css 中，您没有将第一个 ul li 与您的菜单和 ul li 与您的子菜单分开

创建新的CSS

#access .sub-menu li {  
    height: 18px; // the height you need for the submenu or anything else you ant to change                                
}

和

#access .sub-menu li .hover {
height: 18px;// the height you need for the hover effect from the jquery                                
}
于 2013-04-26T22:15:37.483 回答