Question

我正在尝试学习jQuery。我无法找到向子菜单添加滑动效果的方法。我不知道我在哪里弄错了。这是来自小提琴; http://jsfiddle.net/user343/c7qCn/

以下是HTML和JavaScript：

HTML ：

<html lang='en'>
   <head>
      <title>ABC</title>
      <meta charset='utf-8'/>
      <link rel='stylesheet' href='stylesheetg.css' type='text/css' />
      <script type='text/JavaScript' 
         src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
      <meta name='viewport' content='width=device-width, initial-scale=1.0'>
      <script>
         <script type="text/javascript">
            $(document).ready(function() {
               $('.mainnav li').hover(function(){
                  $(this).children(':hidden').slideDown();
               },function(){
                  $(this).parent()find('ul').slideUp();
               }); 
            });
         </script>
   </head>
   <body class='body'>
      <header>
         <div id='header'>
            <div class='webtitle'><a href='#'><img src='Title1.png'  width="80%" height="100%" />       </a></div>
            <div class='social'>
               <ul class='icons'>
                  <li id='facebook' ><a href='#'><img src='face.svg' alt='Join Me on Facebook'/></a>
                  <li id='twitter'><a href='#'><img src='twitter.svg' alt='Join Me on Facebook'/></a>
               </ul>
            </div>
            <!-----------------nav starts---------------------------->   
            <ul class='mainnav'>
               <li><a href='#'>About</a></li>
               <li><a href='#'>Contact</a></li>
               <li><a href='#'>Home</a></li>
               <li class='menuitem'>
                  <a href=''>Projects</a>
                  <div id='menuprojects'>
                     <div class='dropmenus'>
                        <ul class='submenu'>
                           <li><a href="">Social Media</a></li>
                           <li><a href="">Spatial</a></li>
                           <li><a href="">Network</a></li>
                        </ul>
                     </div>
                  </div>
            </ul>
            <!-----------------nav ends---------------------------->
         </div>
      </header>

CSS ：

.mainnav {
    background-color: #e3e3e3;
    width: 40%;
    line-height: 100%;
    float: right;
    display: inline;
    position: relative;
    font-size: 1.375rem;
    list-style-type: none;
    margin-left:-40%;
    padding-right:40px;
    margin-top: 10%;
}
.mainnav a:link {
    box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
    background: linear-gradient(180deg, #b1b5c0, rgba(231, 231, 231, 1.0));
    border-radius: 0%;
    color: rgb(0, 0, 0);
    display: block;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 2%;
    padding-top: 2%;
    margin-right: 0;
    margin-top: 3%;
    float: right;
    opacity:0.4;
    filter:alpha(opacity=40);
}
.mainnav a:visited {
    color: rgb(0, 0, 0);
    display: block;
    padding: 10px 25px;
}
.mainnav a:hover {
    background-color: white;
    text-shadow: none;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -webkit-transition: background 0.7s linear 0s, color 0.5s linear 0s;
    -moz-transition: background 0.7s linear 0s, color 0.5s linear 0s;
    -o-transition: background 0.7s linear 0s, color 0.5s linear 0s;
    opacity:1.0;
    filter:alpha(opacity=100);
}
.mainnav a:active {
    background-color: white;
    text-shadow: none;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
.mainnav a:visited {
    background-color: #E7E7E7;
    text-shadow: none;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
#menuprojects {
    margin:5%;
    margin-top: 10%;
    margin-left: 8%;
    padding:2%;
    position:absolute;
    width:20%;
    background:#E7E7E7;
    display:none;
    float:right;
    font-size: 1rem;
    box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
    background: linear-gradient(180deg, #b1b5c0, rgba(231, 231, 231, 1.0));
}
.submenu {
    display: rigth;
    margin:0;
    padding:1%;
}
.submenu a:link {
    background: none;
    display: table-column;
    padding-left: 4%;
    padding-right: 1%;
    margin-top: 5%;
    float: left;
}
.submenu a:hover {
    background-color: none;
    text-shadow: none;
    color: black;
}
.submenu a:active {
    background-color: none;
    text-shadow: none;
    border-radius:0;
}
.submenu a:visited {
    display: block;
    padding: 0;
}
#menuprojects {
    display:none;
}

我认为问题出在jQuery上。

子菜单不会显示

0 个答案: