Question

无论出于何种原因，当我向css添加无线电检查时，它将出现在菜单中，但不会显示任何菜单项。让它正确切换的任何提示都将是一个巨大的帮助！

这是小提琴： http://jsfiddle.net/casslt07/kjjvp1bx/

**HTML**

    <div id="nav">
         <nav id="nav" class="clearfix">
        <!-- nav menu top level -->
    <input type="checkbox" id="menu-toggle">
    <label for="button" onclick></label>       
<ul class="first-level">
  <li><a href="#">Home</a>
  <li><a>Posts</a>
        <ul>
            <li><a href="#">Listings</a></li>
            <li><a href="#">Comics</a></li>
            <li><a href="#">Observations</a></li>
          <li><a href="#">Poems</a></li>
          <li><a href="#">Short Stories</a></li>
        </ul>
   </li>
  <li><a href="#">Photos</a>
  </li>
  <li><a href="#">Videos</a></li>
  <li><a href="#">About the Author</a></li>
  </ul>


        <?php get_search_form(); ?> </nav>
                                                               </div>




**CSS:**

    /* Config */
body {font-family:Arial}
ul, li {list-style:none; margin:0; padding:0;}

#menu-toggle {
  display:none;
}
#nav label {
  display:none;
  font-size:20px;
    list-style:none;
}

/* Nav */
#nav {
  background-color:#33447A;
  height: inherit;
  border-bottom: 3px solid #13EBC7;
  position:relative;
  display:block; width: 100%; overflow:visible;}

#nav a {
  color:#fff; display:block; font-size: 11pt; padding:18px 20px; text-decoration:none; text-align: left;}
#nav ul li {position:relative;}

/* First-Level */
#nav li {transition:background-color .5s; float:left;}
#nav li:hover {background-color:#50AEED; -webkit-transition: margin-bottom .2s; /* Safari 3.1 to 6.0 */
    transition: margin-bottom .2s;}
#nav > ul > li {display:block; float:left; }

/* Second-level */
#nav li ul {width: 100%;}
#nav > ul li:hover > ul {opacity:1; top:54px; visibility:visible; border-radius: 4px; z-index:3; }
#nav .first-level .second-level > li {float:left;}
#nav > ul ul {opacity:0;  visibility:hidden; position:absolute; top:60px; transition:all .25s; width:1000px;}
#nav > ul ul li {background-color:#3498db; left:0;}
#nav > ul ul li a {padding:10px 20px}

/* Clearfix */
.clearfix:after {visibility: hidden; display: block; font-size: 0; content:" "; clear:both; height:0;}


.nav-search {
    opacity: .25;
    width:35%;
  float: right;
    display:inline;
    position: relative;
    background: #3498db;
    background: url('http://1touchsigns.com/images/search.gif');
    background-repeat: no-repeat;
  -webkit-border-radius:10px;
     -moz-border-radius:10px;
          border-radius:10px;
  border:none;
    top:7px;
  padding:6px;
  outline:none;
  transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}

.nav-search:focus {
  background: white;
    opacity: 1;
}

#responsive {
display: none;
}


@media only screen and (max-width: 480px) {

  #menu-toggle {
  display:block;

}

  #nav label {display: block;height:50px;width:50px;line-height:50px;text-align:center;color:white;font-size:150%;background-color: #83CE69; cursor:pointer;}

    #menu-toggle:checked + #nav {display: block;}
  #nav label:active #nav {display: none;}

  #nav {
    display: block;
        width: 100%;
    height:auto;
        float: right;
        margin-right: 10px;
        background-color: #232323;
    border-bottom-width: 0px;
  }

  #nav ul {
    display:none;
  }

  #nav ul:hover {
    display:block;
  }

   #nav li {
    width:100%;
   }

  #nav ul ul li {
    width:100%;
    color:white;
    background-color:black;
    display:block;
  }

  #nav ul ul li:hover {
    display:block;
}
  }

Answer 1

添加

#menu-toggle:checked + label + ul {
    display: block;        
}

http://jsfiddle.net/kjjvp1bx/3/

或者使用jQuery，两者都有效：

http://jsfiddle.net/kjjvp1bx/2/

响应式菜单切换不起作用

1 个答案: