html - 下拉菜单悬停有效但无法点击

Question

下拉菜单悬停有效但无法点击。
试了很多次，就是解决不了问题。。我的 html 代码:(看起来没有任何错误)

HTML:

    <ul id="menu-bar">
        <li class='active'><a href="#"><span>Home</span></a></li>
        <li><a href="#"><span>About Us</span></a></li>
        <li class='has-sub'><a href='#'><span>1</span></a>
            <ul>
            <li class='has-sub'><a href='#'><span>1-1</span></a>
                <ul>
                    <li><a href='#'><span>1-1-1</span></a></li>
                    <li class='last'><a href='#'><span>1-1-2</span></a></li>
                </ul>
            </li>
            <li class='has-sub'><a href='#'><span>1-2</span></a>
                <ul>
                    <li><a href="#"><span>1-2-1</span></a></li>
                    <li><a href="#"><span>1-2-2</span></a></li>
                    <li><a href="#"><span>1-2-3</span></a></li>
                    <li><a href="#"><span>1-2-4</span></a></li>
                    <li><a href="#"><span>1-2-5</span></a></li>
                    <li class='last'><a href='#'><span>1-2-6</span></a></li>
               </ul>
            </li>
            <li class="has-sub"><a href="#"><span>1-3</span></a>
                <ul>
                    <li><a href="#"><span>1-3-1</span></a></li>
                    <li><a href="#"><span>1-3-2</span></a></li>
                    <li><a href="#"><span>1-3-3</span></a></li>
                    <li class='last'><a href="#"><span>1-3-4</span></a></li>
               </ul>
           </li>
           <li class="has-sub"><a href="#"><span>1-4</span></a>
                <ul>
                    <li><a href="#"><span>1-4-1</span></a></li>
                    <li class='last'><a href="#"><span>1-4-2</span></a></li>
               </ul>
           </li>
           </ul>
        </li>
        <li><a href="#"><span>1-4</span></a></li>
        <li><a href='#'><span>1-5</span></a></li>
        <li class='last'><a href='#'><span>1-6</span></a></li>
    </ul>

CSS:

#menu-bar {
   width: 95%;
   margin: 0px 0px 0px 0px;
   padding: 6px 6px 4px 6px;
   height: 45px;
   line-height: 100%;
   border-radius: 3px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   box-shadow: 2px 2px 2px #6E052E;
   -webkit-box-shadow: 2px 2px 2px #6E052E;
   -moz-box-shadow: 2px 2px 2px #6E052E;
   background: #FF0A6C;
   border: solid 1px #C40853;
   position: relative;
   z-index: 999;
}

#menu-bar li {
   margin: 0px 0px 6px 0px;
   padding: 0px 6px 0px 6px;
   float: left;
   position: relative;
   list-style: none;
}

#menu-bar li ul {
   display: none;
}

#menu-bar a {
   font-weight: bold;
   font-family: 'comic sans ms';
   font-style: normal;
   font-size: 25px;
   color: #FFBFDD;
   text-decoration: none;
   display: block;
   padding: 6px 20px 6px 20px;
   margin: 0;
   margin-bottom: 4px;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   text-shadow: 2px 2px 2px #6E052E;
}

#menu-bar li ul li a {
   margin: 0;
}

#menu-bar .active a,#menu-bar li:hover>a {
   background: #FFD4EC;
   color: #FF0088;
   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
   -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
   box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
   text-shadow: 2px 2px 2px #000000;
}

#menu-bar ul li:hover a,#menu-bar li:hover li a {
   background: none;
   border: none;
   color: #666;
   -box-shadow: none;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
}

#menu-bar ul a:hover {
   background: #FF0088 !important;
   color: #FFC9F1 !important;
   border-radius: 0;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   text-shadow: 2px 2px 1px #FFFFFF;
}

#menu-bar ul {
   background: #FFD4EC;
   display: none;
   margin: 0;
   padding: 0;
   width: 190px;
   position: absolute;
   top: 45px;
   left: 0;
   border: solid 1px #FF8CB6;
   border-radius: 3px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -webkit-box-shadow: 2px 2px 2px #6E052E;
   -moz-box-shadow: 2px 2px 2px #6E052E;
   box-shadow: 2px 2px 2px #6E052E;
}

#menu-bar li:hover>ul {
   display: block;
}

#menu-bar ul li {
   float: none;
   margin: 0;
   padding: 0;
}

#menu-bar ul a {
   padding: 10px 0px 10px 15px;
   color: #FF0088 !important;
   font-size: 12px;
   font-style: normal;
   font-family: arial;
   font-weight: normal;
   text-shadow: 0px 0px 0px #FFFFFF;
}

#menu-bar ul li:first-child>a {
   border-top-left-radius: 3px;
   -webkit-border-top-left-radius: 3px;
   -moz-border-radius-topleft: 3px;
   border-top-right-radius: 3px;
   -webkit-border-top-right-radius: 3px;
   -moz-border-radius-topright: 3px;
}

#menu-bar ul li:last-child>a {
   border-bottom-left-radius: 3px;
   -webkit-border-bottom-left-radius: 3px;
   -moz-border-radius-bottomleft: 3px;
   border-bottom-right-radius: 3px;
   -webkit-border-bottom-right-radius: 3px;
   -moz-border-radius-bottomright: 3px;
}

#menu-bar:after {
   content: ".";
   display: block;
   clear: both;
   visibility: hidden;
   line-height: 0;
   height: 0;
}

#menu-bar {
   display: inline-block;
}

html[xmlns] #menu-bar {
   display: block;
}

* html #menu-bar {
   height: 1%;
}

Answer 1

您可以将此添加到您的子子菜单中。

#menu-bar li li:hover > ul {
    left: 190px;
    top: 0;
}

并将您的子菜单放在更高的位置，以便您可以访问它。

#menu-bar ul {
    background: #ffd4ec;
    display: none;
    margin: 0;
    padding: 0;
    width: 190px;
    position: absolute;
    top: 28px;
    left: 0;
    border: solid 1px #ff8cb6;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-box-shadow: 2px 2px 2px #6e052e;
    -moz-box-shadow: 2px 2px 2px #6e052e;
    box-shadow: 2px 2px 2px #6e052e;
}

参见 http://jsbin.com/fixaperunone/1/edit