2015-06-10 3 views
-2
<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 о том, как создать список dropdow. Все было великолепно до тех пор, пока я не ввел - display: none в css для выпадающего меню и ничего не появляется, но когда я отключен, он появляется под правильной вкладкой, которая исследуется. Любая идея, как я могу это исправить?Почему не отображается ниспадающий список

+0

Ваш первый 'link' тег отсутствует слэш в части закрытия' /> '. Кроме того, отформатируйте свой код ... – im1dermike

ответ

0

Пожалуйста, проверьте следующий код. Надеюсь, это решит вашу проблему.

Вы можете найти обновленный CSS между/*********************************/comment.

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

+0

Вы, сэр, легенда! Спасибо . –

+0

Если мой ответ решил вашу проблему, то пожалуйста, воздержитесь от него :), спасибо заранее –

Смежные вопросы