Question

我安装了一个免费的模板，它从来没有工作过。这是一个有两个“菜单”的网站;
一个是永久性的，标题中最喜欢的链接（.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：

<!-- main Menu -->
<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></li>
      <ul>
     <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>
      <a href='http://www.thecreativefitnesschannel.co.uk/p/health-and-fitness-posts_9.html'>Health and Fitness</a></li>
     <ul>
     <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><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>
</div>

Answer 1

我删除了链接，以便我们可以看到您的标记。您有ul个元素作为其他ul元素的直接后代。这不是有效的标记。（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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>

Answer 2

假设你正在使用TinyNav。您需要为jQuery和TinyNav添加脚本标记。在关闭正文标记之前，将其添加到html的底部。

<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>

然后返回the website并按照说明一步一步完成。如果你还有问题，请回来。

修改

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

父级ul的ID来自nav1 - ＆gt;资产净值。这可能会破坏一些CSS。你必须改变这些。

缩短链接。阅读relative urls。请注意，这仅适用于主页本身。

将缺少的结束标记添加到底部的div。

在html底部添加了脚本标记。

包含jQuery

tinyNav included

脚本启动tinyNav

此处的代码： http://jsfiddle.net/4jbdt9nf/

调整窗口大小以使其正常工作。

Answer 3

你可以试试这个，

.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>

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

3 个答案: