CSS位置问题

时间:2013-10-13 12:55:43

标签: jquery html5 css3

我的菜单有问题我已经搜索了3个小时,我无法解决问题。这是我的脚本:http://jsfiddle.net/z3MUU/ 在章节我有一个名为“sport de salle”的子菜单,这个子菜单有其他子子菜单,问题是那些子子菜单没有出现

这是html代码。 css代码在jsfiddle的链接中。

                    <div id="menu" >
                      <ul class="menu menu-dropdown">





                        <li class="level1 item2 parent">
                          <a href="/nos-realisations.html" class="level1 item2 parent">
                            <span class="bg ">
                              <span class="title">Sections</span>
                              <span class="subtitle">Sections OCEJ</span>
                            </span>
                          </a>
                          <div class="dropdown columns4" style="width:720px; ">

                          <div>
                            <div class="dropdown-t1">
                              <div class="dropdown-t2">
                                <div class="dropdown-t3"></div>
                              </div>
                            </div>
                            <div class="dropdown-1">
                              <div class="dropdown-2">
                                <div class="dropdown-3">

                                  <ul style="height: 164px;" class="col1 level2 first">

                                    <li class="level2 item1 first parent separator">
                                      <div class="group-box1">
                                        <div class="group-box2">
                                          <div class="group-box3">
                                            <div class="group-box4">
                                              <div class="group-box5">
                                                <div class="hover-box1">
                                                  <div class="hover-box2">
                                                    <div class="hover-box3">
                                                      <div class="hover-box4">
                      <ul style="height:60px" class="sf-menu">
                        <li>
                            <a href="#" class="level2 item1 active">
                              Sports de Salle
                            </a>

                          <ul class="sub-menu">
                            <li><a href="#">3rd Level Menu</a>
                              <ul class="sub-menu">
                                <li><a href="#">Menu Item</a></li>
                                <li><a href="#">4th Level Menu</a>
                                  <ul class="sub-menu">
                                    <li><a href="#">Menu Item</a></li>
                                    <li><a href="#"><span class="icon-thumbs-up sz-xxl"></span>Big Icon</a></li>
                                  </ul>
                                </li>
                                <li><a href="#">Menu Item</a></li>
                              </ul>
                            </li>
                            <li><a href="#"><span class="icon-basket-1 sz-s"></span>Buy This Theme</a></li>
                          </ul>
                        </li>
                      </ul>


                                                      </div>
                                                    </div>
                                                  </div>
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </li>
                                    <li class="level2 item2 parent separator">
                                      <div class="group-box1">
                                        <div class="group-box2">
                                          <div class="group-box3">
                                            <div class="group-box4">
                                              <div class="group-box5">
                                                <div class="hover-box1">
                                                  <div class="hover-box2">
                                                    <div class="hover-box3">
                                                      <div class="hover-box4">
                                                        <div class="hover-box4">
                                                          <a href="#" class="level2 item3 active">
                                                            <span class="bg icon" style="background-image: url();">Crystal</span>
                                                          </a>
                                                        </div>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </div>

                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </li>
                                    <li class="level2 item3 parent separator">
                                      <div class="group-box1">
                                        <div class="group-box2">
                                          <div class="group-box3">
                                            <div class="group-box4">
                                              <div class="group-box5">
                                                <div class="hover-box1">
                                                  <div class="hover-box2">
                                                    <div class="hover-box3">
                                                      <div class="hover-box4">
                                                        <div class="hover-box4">
                                                          <a href="#" class="level2 item3 active">
                                                            <span class="bg icon" style="background-image: url();">Crystal</span>
                                                          </a>
                                                        </div>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </div>

                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </li>
                                    <li class="level2 item4 last parent separator">
                                      <div class="group-box1">
                                        <div class="group-box2">
                                          <div class="group-box3">
                                            <div class="group-box4">
                                              <div class="group-box5">
                                                <div class="hover-box1">
                                                  <div class="hover-box2">
                                                    <div class="hover-box3">
                                                      <div class="hover-box4">
                                                        <div class="hover-box4">
                                                          <a href="#" class="level2 item4 active">
                                                            <span class="bg icon" style="background-image: url();">Crystal</span>
                                                          </a>
                                                        </div>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </div>

                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </li>
                                  </ul>


                                  <ul style="height: 164px;" class="col2 level2">

                                    <li class="level2 item1 first parent separator">
                                      <div class="group-box1">
                                        <div class="group-box2">
                                          <div class="group-box3">
                                            <div class="group-box4">
                                              <div class="group-box5">
                                                <div class="hover-box1">
                                                  <div class="hover-box2">
                                                    <div class="hover-box3">
                                                      <div class="hover-box4">
                                                        <div class="hover-box4">
                                                          <a href="#" class="level2 item1 active">
                                                            <span class="bg icon" style="background-image: url();">Crystal</span>
                                                          </a>
                                                        </div>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </li>
                                    <li class="level2 item2 parent separator">
                                      <div class="group-box1">
                                        <div class="group-box2">
                                          <div class="group-box3">
                                            <div class="group-box4">
                                              <div class="group-box5">
                                                <div class="hover-box1">
                                                  <div class="hover-box2">
                                                    <div class="hover-box3">
                                                      <div class="hover-box4">
                                                        <div class="hover-box4">
                                                          <a href="#" class="level2 item3 active">
                                                            <span class="bg icon" style="background-image: url();">Crystal</span>
                                                          </a>
                                                        </div>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </div>

                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </li>
                                    <li class="level2 item3 parent separator">
                                      <div class="group-box1">
                                        <div class="group-box2">
                                          <div class="group-box3">
                                            <div class="group-box4">
                                              <div class="group-box5">
                                                <div class="hover-box1">
                                                  <div class="hover-box2">
                                                    <div class="hover-box3">
                                                      <div class="hover-box4">
                                                        <div class="hover-box4">
                                                          <a href="#" class="level2 item3 active">
                                                            <span class="bg icon" style="background-image: url();">Crystal</span>
                                                          </a>
                                                        </div>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </div>

                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </li>
                                    <li class="level2 item4 last parent separator">
                                      <div class="group-box1">
                                        <div class="group-box2">
                                          <div class="group-box3">
                                            <div class="group-box4">
                                              <div class="group-box5">
                                                <div class="hover-box1">
                                                  <div class="hover-box2">
                                                    <div class="hover-box3">
                                                      <div class="hover-box4">
                                                        <div class="hover-box4">
                                                          <a href="#" class="level2 item4 active">
                                                            <span class="bg icon" style="background-image: url();">Crystal</span>
                                                          </a>
                                                        </div>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </div>

                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </li>
                                  </ul>

                                  <ul style="height: 164px;" class="col3 level2">

                                    <li class="level2 item1 first parent separator">
                                      <div class="group-box1">
                                        <div class="group-box2">
                                          <div class="group-box3">
                                            <div class="group-box4">
                                              <div class="group-box5">
                                                <div class="hover-box1">
                                                  <div class="hover-box2">
                                                    <div class="hover-box3">
                                                      <div class="hover-box4">
                                                        <div class="hover-box4">
                                                          <a href="#" class="level2 item1 active">
                                                            <span class="bg icon" style="background-image: url();">Crystal</span>
                                                          </a>
                                                        </div>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </li>
                                    <li class="level2 item2 parent separator">
                                      <div class="group-box1">
                                        <div class="group-box2">
                                          <div class="group-box3">
                                            <div class="group-box4">
                                              <div class="group-box5">
                                                <div class="hover-box1">
                                                  <div class="hover-box2">
                                                    <div class="hover-box3">
                                                      <div class="hover-box4">
                                                        <div class="hover-box4">
                                                          <a href="#" class="level2 item3 active">
                                                            <span class="bg icon" style="background-image: url();">Crystal</span>
                                                          </a>
                                                        </div>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </div>

                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </li>
                                    <li class="level2 item3 parent separator">
                                      <div class="group-box1">
                                        <div class="group-box2">
                                          <div class="group-box3">
                                            <div class="group-box4">
                                              <div class="group-box5">
                                                <div class="hover-box1">
                                                  <div class="hover-box2">
                                                    <div class="hover-box3">
                                                      <div class="hover-box4">
                                                        <div class="hover-box4">
                                                          <a href="#" class="level2 item3 active">
                                                            <span class="bg icon" style="background-image: url();">Crystal</span>
                                                          </a>
                                                        </div>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </div>

                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </li>
                                    <li class="level2 item4 last parent separator">
                                      <div class="group-box1">
                                        <div class="group-box2">
                                          <div class="group-box3">
                                            <div class="group-box4">
                                              <div class="group-box5">
                                                <div class="hover-box1">
                                                  <div class="hover-box2">
                                                    <div class="hover-box3">
                                                      <div class="hover-box4">
                                                        <div class="hover-box4">
                                                          <a href="#" class="level2 item4 active">
                                                            <span class="bg icon" style="background-image: url();">Crystal</span>
                                                          </a>
                                                        </div>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </div>

                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </li>
                                  </ul>



                                  <ul style="height: 164px;" class="col4 level2 last">

                                    <li class="level2 item1 first parent separator">
                                      <div class="group-box1">
                                        <div class="group-box2">
                                          <div class="group-box3">
                                            <div class="group-box4">
                                              <div class="group-box5">
                                                <div class="hover-box1">
                                                  <div class="hover-box2">
                                                    <div class="hover-box3">
                                                      <div class="hover-box4">
                                                        <div class="hover-box4">
                                                          <a href="#" class="level2 item1 active">
                                                            <span class="bg icon" style="background-image: url();">Crystal</span>
                                                          </a>
                                                        </div>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </li>
                                    <li class="level2 item2 parent separator">
                                      <div class="group-box1">
                                        <div class="group-box2">
                                          <div class="group-box3">
                                            <div class="group-box4">
                                              <div class="group-box5">
                                                <div class="hover-box1">
                                                  <div class="hover-box2">
                                                    <div class="hover-box3">
                                                      <div class="hover-box4">
                                                        <div class="hover-box4">
                                                          <a href="#" class="level2 item3 active">
                                                            <span class="bg icon" style="background-image: url();">Crystal</span>
                                                          </a>
                                                        </div>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </div>

                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </li>
                                    <li class="level2 item3 parent separator">
                                      <div class="group-box1">
                                        <div class="group-box2">
                                          <div class="group-box3">
                                            <div class="group-box4">
                                              <div class="group-box5">
                                                <div class="hover-box1">
                                                  <div class="hover-box2">
                                                    <div class="hover-box3">
                                                      <div class="hover-box4">
                                                        <div class="hover-box4">
                                                          <a href="#" class="level2 item3 active">
                                                            <span class="bg icon" style="background-image: url();">Crystal</span>
                                                          </a>
                                                        </div>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </div>

                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </li>
                                    <li class="level2 item2 last parent separator">
                                      <div class="group-box1">
                                        <div class="group-box2">
                                          <div class="group-box3">
                                            <div class="group-box4">
                                              <div class="group-box5">
                                                <div class="hover-box1">
                                                  <div class="hover-box2">
                                                    <div class="hover-box3">
                                                      <div class="hover-box4">
                                                        <div class="hover-box4">
                                                          <a href="#" class="level2 item4 active">
                                                            <span class="bg icon" style="background-image: url();">Crystal</span>
                                                          </a>
                                                        </div>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </div>

                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </li>
                                  </ul>




                                </div>
                              </div>
                            </div>



                            <div class="dropdown-b1">
                              <div class="dropdown-b2">
                                <div class="dropdown-b3"></div>
                              </div>
                            </div>
                          </div>
                          </div>

                        </li>

                        <li class="level1 item2 last">
                          <a href="/contact.html" class="level1 item7 last">
                            <span class="bg ">
                              <span class="title">Contact</span>
                              <span class="subtitle">Contactez-nous</span>
                            </span>
                          </a>
                        </li>

                      </ul>
                    </div>

1 个答案:

答案 0 :(得分:1)

问题在于这个高度:

<ul style="height:60px" class="sf-menu">

删除并在子菜单上设置位置为固定:

position: fixed;

这应该有助于解决您的问题。