1

標準の LI と UL を使用して作成されたカスタム メニューがあります。1 レベルのサブメニューがあります。Google Chrome でこれらのサブメニューをクリックすると、クリック イベントが発生しません。これは IE では機能しますが、Chrome では機能しません。

この問題は最近発生しましたが、ほんの少し前まではすべて問題がなかったと確信しています。

HTMLは次のとおりです。

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<style type="text/css">
        #navMenu {
    width: 900px;
    position: absolute;
}
#navMenu ul {
    padding: 0;
    margin: 0 9px;
}
#navMenu li {
    margin: 3px 2px 0;
    float: left;
    list-style-type: none;
}
#navMenu li a {
    display: block;
    color: #000;
    border: 1px solid #000;
    background: #E1DFD0 top left repeat-x;
    height: 15px;
    line-height: 1.154em;
    text-decoration: none;
    font: normal normal bold 0.985em/normal arial, sans-serif;
    float: left;
    padding: 0px 6px 3px;
}
#navMenu li a {
    float: none;
}
#navMenu li a:hover, #navMenu li a.on{
    color: #FFF;
    background: #740404 top left repeat-x;
}

/*Sub-Menus*/
#navMenu li ul{
    margin: 0 0 0 -2px;    
    padding: 0;
    display: none;
    visibility:hidden;

    position: absolute;
}

#navMenu li:hover ul{
    display:block;
    visibility:visible;
    width: 10em;
}

#navMenu li li{
    display: list-item;
    clear: both;
    list-style: none;
    margin: 0;
}

#navMenu li li a{
    text-decoration: none;
    width: 150px;
}

#navMenu li li a:hover{
    color:#fff; 
}
</style>
</head>
<body>

<div class="position:relative; top:0">
    <div id="navMenu">
        <ul>
            <li>
                <a href="#" >Menu 1</a>
            </li>
            <li>
                <a href="#">Menu 2</a>
                <ul>
                    <li>
                        <a href="#">Menu 2.1</a>
                    </li>
                    <li>
                        <a href="#">Menu 2.2</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Menu 3</a>
                <ul>
                    <li>
                        <a href="#">Menu 3.1</a>
                    </li>
                    <li>
                        <a href="#">Menu 3.2</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Menu 4</a>
                <ul>
                    <li>
                        <a href="#">Menu 4.1</a>
                    </li>
                    <li>
                        <a href="#">Menu 4.2</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript">
$('#navMenu li>a').click(function() {
   console.log("clicked a link");
});
</script>

</body>
</html>

ここにはフィドルもあります。

これを説明するのは途方に暮れています。どんな助けでも大歓迎です!

ありがとう

4

0 に答える 0