Javascript 我的模板错误：下拉菜单的CSS代码

我安装了一个免费的模板，它从来没有工作过。 这是一个有两个“菜单”的网站
其中一个是永久性的，标题中有常用链接（.menu-1 ul.mox-menu）。
另一个应该是可点击的下拉菜单（nav.menu2）

我真的不知道我在做什么，为什么下拉菜单不下拉

.topmenu {
    height:  40px;
     background:  #7F7F7F;
}

#header-warp {
  min-height: 160px;
  background-color: #fff;

}
#header-warp .section {
  margin-top: 20px;
}
.botmenu {
   margin-bottom: 35px;
}

/*******DropDown Menu*******/
nav.menu-2 {    background-color: #f4f4f4;    font-family: 'Oswald', sans-serif;    font-weight: 400;    font-size: 18px;   text-transform: uppercase;    border-top: 1px solid #E5E5E5;    border-bottom: 1px solid #E5E5E5;
}
nav.menu-1 {
    padding: 0 10px;
}
.menu-1 ul.mox-menu {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    background: #393939;
    font-size: 14px;
    font-family: Oswald;
}
.menu-2 ul.mox-menu {
  float: left;
  border-right: 1px solid #E5E5E5;
}
.menu-2 ul.mox-menu > li {  
  position: relative;
  float: left;
  border-left: 1px solid #E5E5E5;
  height: 60px;
}

.menu-1 ul.mox-menu > li {
    position:  relative;
   display: block;
  height:  40px;
   margin-right:  15px;    
  padding-right:  15px;    
  border-right:  1px solid #404040;    
  float:  left;
}
.menu-1 ul.mox-menu li a {
  display: block;
  line-height: 40px;
  color: #4A4A4A;
  font-size: 14px;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
}
.menu-2 ul.mox-menu > li > a {
  display: block;
  height: 57px;
  color: #ccc;
  padding: 0 18px;
  line-height: 60px;
  -webkit-transition: all .15s ease-in-out;
  -moz-transition: all .15s ease-in-out;
  -o-transition: all .15s ease-in-out;
  transition: all .15s ease-in-out;
}
.menu-1 ul.mox-menu li a:hover {
color: #eee;
  text-decoration: none;
}
.menu-2 ul.mox-menu > li:hover > a {
  color: #666;
  text-decoration: none;
  background-color: #fff;
  border-bottom: 3px solid #4A4A4A;
}
.menu-1 ul.mox-menu ul.submenu {
    width: 180px;
    padding: 0;
    margin: 0;
    background: #393939;
    position: absolute;
    top: 40px;
    left: 0;
    display: none;
    z-index: 1;
}
#nav1 li:hover ul {
    display: none;
}
#nav1 ul {
    display: none; background-color: #383838;    position: absolute;    left: 0;    top: 60px;    z-index: 6000;
}

#nav1 ul li {
    border-bottom: 1px solid #3F3F3F;    width: 100%;    height: auto;    border-left: none;    z-index: 3000;
    float: left;
}

#nav1 ul li a {
    display: non;    padding: 10px 14px;    background: none;    color: #878787;    white-space: nowrap;    font-size: 14px;    text-transform: capitalize;    line-height: normal;    min-width: 150px;    height: auto;    border-bottom: none;
    height: auto;
}

#nav1 ul li a:hover {
    color: #fff;
    text-decoration: none;
}
@-webkit-keyframes fadeInUp {
    0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
}
100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
}@keyframes fadeInUp {
    0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
}
100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
}.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}
@-webkit-keyframes fadeInRight {
    0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
}
100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
}@keyframes fadeInRight {
    0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
}
100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}
}.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}
.menu-1 .mox-menu li:hover > ul, .menu-2 .mox-menu li:hover > ul {
    display: block;
    -moz-animation: fadeInUp .3s ease-in;
    -webkit-animation: fadeInUp .3s ease-in;
    animation: fadeInUp .3s ease-in;
}
.menu-1 .mox-menu ul li:hover > ul, .menu-2 .mox-menu ul li:hover > ul {
    display: block;
    -moz-animation: fadeInRight .3s ease-in;
    -webkit-animation: fadeInRight .3s ease-in;
    animation: fadeInRight .3s ease-in;
}
.menu-1 {
    width: 100%}
ul.soco {
    list-style-type: drop-down;
    float: right;
    margin-right: 8px;
}
ul.soco li {
    float: left;
    display: inline;
}
ul.soco li.fb a:hover {
    background: #3b5998;
    color: #FFF;
}
ul.soco li.li a:hover {
    background: #007bb6;
    color: #FFF;
}
ul.soco li.gp a:hover {
    background: #dd4b39;
    color: #FFF;
}
ul.soco li.tw a:hover {
    background: #00aced;
    color: #FFF;
}
i {
    font-size: 100%}
.tinynav {
    display: inline-block;
    position: relative;
    overflow: hidden;
    height: 28px;
    width: auto;
    background: #393939;
    border: 1px solid;
    font-family: FontAwesome;
    border-color: #fff #f7f7f7 #f5f5f5;
    border-radius: 3px;
    background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
    background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
    background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.06));
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
.tinynav:before, .tinynav:after {
    content: '';
    position: absolute;
    z-index: 2;
    top: 9px;
    right: 10px;
    width: 0;
    height: 0;
    border: 4px dashed;
    border-color: #888 transparent;
    pointer-events: none;
}
.tinynav:before {
    border-bottom-style: solid;
    border-top: none;
}
.tinynav:after {
    margin-top: 7px;
    border-top-style: solid;
    border-bottom: none;
}
.tinynav {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 6px 8px 6px 10px;
    height: 28px;
    line-height: 14px;
    font-size: 12px;
    color: #62717a;
    text-shadow: 0 1px #fff;
    background: #f2f2f2;
    background: rgba(0, 0, 0, 0)!important;
    border: 0;
    border-radius: 0;
    outline: 2px solid #49aff2;
    outline: 2px solid -webkit-focus-ring-color;
    outline-offset: 1px;
}
.tinynav:focus {
    z-index: 3;
    width: 90%;
    color: #394349;
    outline: 2px solid #49aff2;
    outline: 2px solid -webkit-focus-ring-color;
    outline-offset: 1px;
}
.tinynav > option {
    margin: 3px;
    padding: 6px 8px;
    text-shadow: none;
    background: #f2f2f2;
    border-radius: 1px;
    cursor: pointer;
}
.tinynav {
    display: none;
}
#mox-menu .selected a, #mox-menu .selected a {
    color: red;

Html:

我删除了链接，以便查看您的标记。您有

ul

元素作为其他

ul

元素的直接后代。这是无效的标记。（）很可能是问题所在

<ul class='mox-menu' id='nav1'>
     <li></li>
     <li></li>
     <ul>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
     </ul>
     <li></li>
     <ul>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
     </ul>
     <li></li>
     <li></li>
     <li></li>
 </ul>

一般来说：

<ul>
    <li>Drop down link
        <ul>
            <li>Link 1</li>
            <li>Link 2</li>
        </ul> 
    </li> 
</ul>

下拉链接

链接1
链接2

假设您使用的是TinyNav。您需要向jQuery和TinyNav添加一个脚本标记。将它添加到html的底部，就在结束body标记之前，如下所示

<body>
    <!-- Stuff here 
         ...
         ...
         -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script src="tinynav.min.js"></script>
</body>

之后，返回并逐步按照说明进行操作。如果你还有麻烦就回来

编辑：

我回去，添加了所有的脚本，使其工作。我改变了几件事：

• 父ul的Id从nav1->nav转到。这可能会破坏一些CSS。你必须改变这些
• 缩短你的链接。仔细阅读。请注意，这仅适用于主页本身
• 在底部的div中添加了缺少的结束标记
• 在html的底部添加了脚本标记。
  • 包括jQuery
  • 包括tinyNav
  • 启动tinyNav的脚本

代码如下：

调整窗口大小以查看其是否正常工作。

您可以尝试此操作

.topmenu {
height: 40px;
background: #7F7F7F;
}
#header-warp {
min-height: 160px;
background-color: #fff;
}
#header-warp .section {
margin-top: 20px;
}
.botmenu {
margin-bottom: 35px;
}
/*******DropDown Menu*******/
nav.menu-2 {
background-color: #f4f4f4;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 18px;
text-transform: uppercase;
border-top: 1px solid #E5E5E5;
border-bottom: 1px solid #E5E5E5;
}
nav.menu-1 {
padding: 0 10px;
}
.menu-1 ul.mox-menu {
margin: 0 auto;
padding: 0;
width: 100%;
background: #393939;
font-size: 14px;
font-family: Oswald;
}
.menu-2 ul.mox-menu {
float: left;
border-right: 1px solid #E5E5E5;
}
.menu-2 ul.mox-menu > li {
position: relative;
float: left;
border-left: 1px solid #E5E5E5;
height: 60px;
}
.menu-1 ul.mox-menu > li {
position: relative;
display: block;
height: 40px;
margin-right: 15px;
padding-right: 15px;
border-right: 1px solid #404040;
float: left;
}
.menu-1 ul.mox-menu li a {
display: block;
line-height: 40px;
color: #4A4A4A;
font-size: 14px;
font-family: 'Oswald', sans-serif;
font-weight: 400;
text-transform: uppercase;
}
.menu-2 ul.mox-menu > li > a {
display: block;
height: 57px;
color: #ccc;
padding: 0 18px;
line-height: 60px;
-webkit-transition: all .15s ease-in-out;
-moz-transition: all .15s ease-in-out;
-o-transition: all .15s ease-in-out;
transition: all .15s ease-in-out;
}
.menu-1 ul.mox-menu li a:hover {
color: #eee;
text-decoration: none;
}
.menu-2 ul.mox-menu > li:hover > a {
color: #666;
text-decoration: none;
background-color: #fff;
border-bottom: 3px solid #4A4A4A;
}
.menu-1 ul.mox-menu ul.submenu {
width: 180px;
padding: 0;
margin: 0;
background: #393939;
position: absolute;
top: 40px;
left: 0;
display: none;
z-index: 1;
}
#nav1 ul {
display: none;
background-color: #383838;
position: absolute;
left: 0;
top: 60px;
z-index: 6000;
}
#nav1 ul li {
border-bottom: 1px solid #3F3F3F;
width: 100%;
height: auto;
border-left: none;
z-index: 3000;
float: left;
}
#nav1 ul li a {
display: non;
padding: 10px 14px;
background: none;
color: #878787;
white-space: nowrap;
font-size: 14px;
text-transform: capitalize;
line-height: normal;
min-width: 150px;
height: auto;
border-bottom: none;
height: auto;
}
#nav1 li:hover .child { /*Added This*/
display: block;
}

和HTML

<div class='botmenu'>
<nav class='menu-2'>
    <div class='outer'>
        <ul class='mox-menu' id='nav1'>
            <li><a href='http://www.thecreativefitnesschannel.co.uk'>Home</a></li>
            <li><a href='http://www.thecreativefitnesschannel.co.uk/p/creative-posts_9.html'>Creative Posts</a>
            <ul class="child">
                <li><a href='http://www.thecreativefitnesschannel.co.uk/p/makeup-tutorials.html'>Makeup Tutorials and Beauty advice</a>
                </li>
                <li><a href='http://www.thecreativefitnesschannel.co.uk/p/clothing-makeup.html'>Clothing tutorials</a>
                </li>
                <li><a href='http://www.thecreativefitnesschannel.co.uk/p/fun-creative.html'>Fun and Creative</a>
                </li>
                <li><a href='http://www.thecreativefitnesschannel.co.uk/p/personal-pages.html'>Daily Diary(recipes and guides inc)</a>
                </li>
            </ul>
            </li>

            <li> <a href='http://www.thecreativefitnesschannel.co.uk/p/health-and-fitness-posts_9.html'>Health and Fitness</a>
              <ul class="child">
                <li><a href='http://www.thecreativefitnesschannel.co.uk/p/workouts.html'>Workout Routines</a>
                </li>
                <li><a href='http://www.thecreativefitnesschannel.co.uk/p/weight-loss-advice-and-guidance.html'>Weightloss Advice and Tips</a>
                </li>
                <li><a href='http://www.thecreativefitnesschannel.co.uk/p/healthy-recipes.html'>Healthy Recipes</a>
                </li>
                <li><a href='http://www.thecreativefitnesschannel.co.uk/p/health-and-fitness-newsreviews.html'>Health and Fitness News/Reviews</a>
                </li>
                <li><a href='http://www.thecreativefitnesschannel.co.uk/p/personal-triumph.html'>Personal Triumph</a>
                </li>
                <li><a href='http://www.thecreativefitnesschannel.co.uk/search/label/Personal%20Training%20Updates'>Personal Training Updates</a>
                </li>
            </ul>
            </li>

            <li><a href='http://www.thecreativefitnesschannel.co.uk/p/blog-page.html'>5 days to Fit Programme</a></li>
            <li><a href='http://www.thecreativefitnesschannel.co.uk/p/fitness-tee-store.html'>The SHOP</a></li>
            <li><a href='http://creativefitnesschannel.blogspot.co.uk/p/about-amy.html'>About us/Contact us</a></li>
        </ul>
        <div style='clear:both;' /></div>
    <div style='clear:both;' />
</nav>

---

请详细描述问题。最好创建代码片段或Fiddle一个问题是HTML结构。一个

不能是另一个

的直接子级。每个子列表必须位于父列表的

内。因此UL应该围绕下拉类别，而不是单独分开它们？是吗？我添加了一个使用最常用语法的编辑。您的模板没有附带示例或其他内容。有关具体参考，请参阅at MDN。谢谢，我已经为

添加了新代码，但有些代码根本没有出现在列表中。-我从来没有犯过这么大的错误！我想我的脑袋快要崩溃了。谢谢你，我要回到哪个网站？（我获取模板的网站是自动化的，没有人可以问，也没有步骤可以遵循）我有一个电脑技术专家，但他看不出哪里出了问题。这很有效！但不知怎的，它删除了菜单下面的滑块？这是因为下拉菜单干扰了它吗？嗯，菜单与滑块无关。正如我在代码中所评论的，删除了一些CSS。将它们添加回去，然后检查是否有效。如果你遇到任何问题，一定要回来。。

<div class='botmenu'>
<nav class='menu-2'>
    <div class='outer'>
        <ul class='mox-menu' id='nav1'>
            <li><a href='http://www.thecreativefitnesschannel.co.uk'>Home</a></li>
            <li><a href='http://www.thecreativefitnesschannel.co.uk/p/creative-posts_9.html'>Creative Posts</a>
            <ul class="child">
                <li><a href='http://www.thecreativefitnesschannel.co.uk/p/makeup-tutorials.html'>Makeup Tutorials and Beauty advice</a>
                </li>
                <li><a href='http://www.thecreativefitnesschannel.co.uk/p/clothing-makeup.html'>Clothing tutorials</a>
                </li>
                <li><a href='http://www.thecreativefitnesschannel.co.uk/p/fun-creative.html'>Fun and Creative</a>
                </li>
                <li><a href='http://www.thecreativefitnesschannel.co.uk/p/personal-pages.html'>Daily Diary(recipes and guides inc)</a>
                </li>
            </ul>
            </li>

            <li> <a href='http://www.thecreativefitnesschannel.co.uk/p/health-and-fitness-posts_9.html'>Health and Fitness</a>
              <ul class="child">
                <li><a href='http://www.thecreativefitnesschannel.co.uk/p/workouts.html'>Workout Routines</a>
                </li>
                <li><a href='http://www.thecreativefitnesschannel.co.uk/p/weight-loss-advice-and-guidance.html'>Weightloss Advice and Tips</a>
                </li>
                <li><a href='http://www.thecreativefitnesschannel.co.uk/p/healthy-recipes.html'>Healthy Recipes</a>
                </li>
                <li><a href='http://www.thecreativefitnesschannel.co.uk/p/health-and-fitness-newsreviews.html'>Health and Fitness News/Reviews</a>
                </li>
                <li><a href='http://www.thecreativefitnesschannel.co.uk/p/personal-triumph.html'>Personal Triumph</a>
                </li>
                <li><a href='http://www.thecreativefitnesschannel.co.uk/search/label/Personal%20Training%20Updates'>Personal Training Updates</a>
                </li>
            </ul>
            </li>

            <li><a href='http://www.thecreativefitnesschannel.co.uk/p/blog-page.html'>5 days to Fit Programme</a></li>
            <li><a href='http://www.thecreativefitnesschannel.co.uk/p/fitness-tee-store.html'>The SHOP</a></li>
            <li><a href='http://creativefitnesschannel.blogspot.co.uk/p/about-amy.html'>About us/Contact us</a></li>
        </ul>
        <div style='clear:both;' /></div>
    <div style='clear:both;' />
</nav>