为什么没有下拉列表正确显示

时间：2015-06-10 18:54:25

标签： html css 

    <html>
        <head>
            <meta charset = "utf-8/">
            <title> Jquery </title>
           <script type = "text/javascript" src = "http://code.jquery.com/jquery-1.11.3.min.js"></script> 
           <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
           <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
           <script type = "text/javascript" src = "jsi/Scriptz.js" > </script>
           <link rel = "stylesheet" type = "text/css" href = "RizzStyle.css"/> 
            <!-- Start Skider -->
            <link rel="stylesheet" type="text/css" href="engine1/style.css" />
            <script type="text/javascript" src="engine1/jquery.js"></script>
            <!-- End Slider-->

       </head>




        <body onload = "Slider();" background = "black.jpg" >


        <div id = "header">

            <div id = "nav">
                <div class = "Logo">  <a href = "Main.html"> <img src = "Logo.png" border = "0" /> </a>  </div>
           <div id = "nav_wrapper">
                <ul>
                    <li> <a href="#">Home</a></li><li>
                    <a href="#">About Us</a></li><li>
                    <a href="#">Explore <img src = "Arrow.png"/></a>

                        <ul>
                              <li><a href="#">Series/Movies</a></li>
                              <li><a href="#">Sports</a></li>
                              <li><a href="#">Games</a></li>

                        </ul>


                    </li>


               </ul>


          </div>      


        </div>
        </div>    


            <div id = "container" > 


                <div id="wowslider-container1">
                    <div class="ws_images"><ul>
              <li><img src="data1/images/north.jpg" alt="North" title="North" id="wows1_0"/></li>
              <li><a href="http://wowslider.com/vi"><img src="data1/images/wolf.jpg" alt="content slider" title="Wolf" id="wows1_1"/></a>             </li>
            <li><img src="data1/images/android.jpg" alt="Android" title="Android" id="wows1_2"/></li>
           </ul></div>
           <div class="ws_bullets"><div>
              <a href="#" title="North"><span><img src="data1/tooltips/north.jpg" alt="North"/>1</span></a>
              <a href="#" title="Wolf"><span><img src="data1/tooltips/wolf.jpg" alt="Wolf"/>2</span></a>
              <a href="#" title="Android"><span><img src="data1/tooltips/android.jpg" alt="Android"/>3</span></a>
           </div></div>
        <div class="ws_shadow"></div>
                </div>  
                <script type="text/javascript" src="engine1/wowslider.js"></script>
                <script type="text/javascript" src="engine1/script.js"></script>


                <div class = "shadow">

                </div>


            </div>

        </body>



    </html>







 body{

        padding:0;
        margin:0;
        overflow-y:scroll;
        font-family: sans-serif;
        font-size: 18px;


    }

    #container {
                   width:1200px;
                   height:1000px;
                   margin: 70px auto;
                   border : 1px solid;
                   background-color: aliceblue;
                   top:0;

               }




      #header{
                width : 100%;
                height: 60px;
                background-color:#212121;
                box-shadow: 0px 4px 2px #333; 
                top:0px;
                z-index: 1000;
                margin: 0 auto;
                position:fixed;
                white-space: nowrap;



            }


      #header h1{
                width : 1024px;
                margin : 0px auto; 
                padding:12px;
                color:white; 

            }





    .shadow{
        background-image : url(shadow.png);
        background-repeat: no-repeat;
        background-position: top;
        width: 864px;
        height:144px;
        margin: -60px auto;


    }

    .Logo{

        float:left;
        height: 60px;
        padding:5px 3px;
        line-height:40px;

    }

    .Logo img{
        width:60%;
    }



    #nav{
        background-color: #212121;


    }

    #nav_wrapper{
        width:960px;
        margin:0 auto;
        text-align: left;


    }

    #nav ul{

        list-style-type: none;
        padding: 0;
        margin: 0;
        position: relative;

    }

    #nav ul li{
        display:inline-block;

    }

    #nav ul li :hover{
        background-color: #FF0000;

    }

    #nav ul li img{
        vertical-align: middle;
        padding-left:10px;
        width:20;


    }

    #nav ul li a,visited{
        color:#ccc;
        display:block;
        padding: 15px;
        text-decoration: none;
    }

    #nav ul li a:hover{

        background-color:#FF0000;
        text-decoration: none;
        height:50%;

    }

    #nav ul li: hover ul{

        display: block;

    }

    #nav ul ul{
        position:absolute;
        background-color:#212121;

    }

    #nav ul ul li{
        display:block;
    }

大家好，我一直在关注如何创建下拉列表的Youtube教程。一切都很好，直到我输入 - 显示：没有在css下拉，没有任何显示但是当我禁用它时出现在探索正确的选项卡下面。任何想法如何解决这个问题？

1 个答案:

答案 0 :(得分：0)

请检查以下代码。我希望这能解决你的问题。

您可以在/ ***************************** /评论之间找到更新的CSS。

＆＃13;
＆＃13; 
<html>

<head>
  <meta charset="utf-8/">
  <title>Jquery</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script type="text/javascript" src="jsi/Scriptz.js">
  </script>
  <link rel="stylesheet" type="text/css" href="RizzStyle.css" />
  <!-- Start Skider -->
  <link rel="stylesheet" type="text/css" href="engine1/style.css" />
  <script type="text/javascript" src="engine1/jquery.js"></script>
  <!-- End Slider-->
  <style type="text/css">
    body {
      padding: 0;
      margin: 0;
      overflow-y: scroll;
      font-family: sans-serif;
      font-size: 18px;
    }
    #container {
      width: 1200px;
      height: 1000px;
      margin: 70px auto;
      border: 1px solid;
      background-color: aliceblue;
      top: 0;
    }
    #header {
      width: 100%;
      height: 60px;
      background-color: #212121;
      box-shadow: 0px 4px 2px #333;
      top: 0px;
      z-index: 1000;
      margin: 0 auto;
      position: fixed;
      white-space: nowrap;
    }
    #header h1 {
      width: 1024px;
      margin: 0px auto;
      padding: 12px;
      color: white;
    }
    .shadow {
      background-image: url(shadow.png);
      background-repeat: no-repeat;
      background-position: top;
      width: 864px;
      height: 144px;
      margin: -60px auto;
    }
    .Logo {
      float: left;
      height: 60px;
      padding: 5px 3px;
      line-height: 40px;
    }
    .Logo img {
      width: 60%;
    }
    #nav {
      background-color: #212121;
    }
    #nav_wrapper {
      width: 960px;
      margin: 0 auto;
      text-align: left;
    }
    #nav ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      position: relative;
    }
    #nav ul li {
      display: inline-block;
    }
    #nav ul li:hover {
      background-color: #FF0000;
    }
    #nav ul li img {
      vertical-align: middle;
      padding-left: 10px;
      width: 20;
    }
    #nav ul li a,
    visited {
      color: #ccc;
      display: block;
      padding: 15px;
      text-decoration: none;
    }
    #nav ul li a:hover {
      background-color: #FF0000;
      text-decoration: none;
      height: 50%;
    }
    /*********************************/
    #nav ul li:hover ul {
      display: block;
    }
    #nav ul ul {
      position: absolute;
      background-color: #212121;
      display: none;
    }
    /*********************************/
    #nav ul ul li {
      display: block;
    }
  </style>
</head>

<body onload="Slider();" background="black.jpg">
  <div id="header">
    <div id="nav">
      <div class="Logo">
        <a href="Main.html">
          <img src="Logo.png" border="0" />
        </a>
      </div>
      <div id="nav_wrapper">
        <ul>
          <li> <a href="#">Home</a>
          </li>
          <li>
            <a href="#">About Us</a>
          </li>
          <li>
            <a href="#">Explore <img src = "Arrow.png"/></a>
            <ul>
              <li><a href="#">Series/Movies</a>
              </li>
              <li><a href="#">Sports</a>
              </li>
              <li><a href="#">Games</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div id="container">
    <div id="wowslider-container1">
      <div class="ws_images">
        <ul>
          <li>
            <img src="data1/images/north.jpg" alt="North" title="North" id="wows1_0" />
          </li>
          <li>
            <a href="http://wowslider.com/vi">
              <img src="data1/images/wolf.jpg" alt="content slider" title="Wolf" id="wows1_1" />
            </a>
          </li>
          <li>
            <img src="data1/images/android.jpg" alt="Android" title="Android" id="wows1_2" />
          </li>
        </ul>
      </div>
      <div class="ws_bullets">
        <div>
          <a href="#" title="North"><span><img src="data1/tooltips/north.jpg" alt="North"/>1</span></a>
          <a href="#" title="Wolf"><span><img src="data1/tooltips/wolf.jpg" alt="Wolf"/>2</span></a>
          <a href="#" title="Android"><span><img src="data1/tooltips/android.jpg" alt="Android"/>3</span></a>
        </div>
      </div>
      <div class="ws_shadow"></div>
    </div>
    <script type="text/javascript" src="engine1/wowslider.js"></script>
    <script type="text/javascript" src="engine1/script.js"></script>
    <div class="shadow">
    </div>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题