Html и css: выпадающее меню не работает

У меня есть раскрывающееся меню в верхней части моей страницы, и я пытаюсь добраться до центра на моей странице. Он не пойдет в центр, и теперь этот эффект падения не будет работать. если вы сможете решить эту проблему, я буду очень благодарен за это, или вы можете показать мне другое крутое выпадающее меню, которое будет работать.Html и css: выпадающее меню не работает

<!DOCTYPE html> 

<HEAD> 
<TITLE> </TITLE> 

<LINK href="to.css" rel="stylesheet" type="text/css"> 


</HEAD> 

<BODY> 
<DIV ID="header"> 
<div id="nav"> 
<div id="nav_wrapper"> 
<ul> 
<li><a href="#">HOME</a> 
</li> 
</li> 
<li> <a href="#">dropdown #1</a> 

<ul> 
<li><a href="#">dropdown #1 item #1</a> 
</li> 
<li><a href="#">dropdown #1 item #2</a> 
</li> 
<li><a href="#">dropdown #1 item #3</a> 
</li> 
</ul> 
</li> 
<li> <a href="#">dropdown #2</a> 

<ul> 
<li><a href="#">dropdown #2 item #1</a> 
</li> 
<li><a href="#">dropdown #2 item #2</a> 
</li> 
<li><a href="#">dropdown #2 item #3</a> 
</li> 
</ul> 
</li> 
</li> 
</ul> 
</div> 
<!-- Nav wrapper end --> 
</div> 


</DIV> 

</DIV> 

<DIV ID="wrapper"> 
<DIV ID="content_area"> 
<p> </p> 
<center> 
<video width="900" height="550" controls autoplay> 
<source src="fifa.mp4" type="video/mp4"> 
<source src="fifa.ogg" type="video/ogg"> 
<source src="fifa.webm" type="video/webm"> 
<object data="fifa.mp4" width="320" height="240"> 
<embed src="fifa.swf" width="320" height="240"> 
</object> 
</video> 
</center> 

</DIV> 
</DIV> 

<DIV ID="footer"> 
Hello and Welcome -------------- 
</DIV> 


</BODY> 

</HTML> 

CSS: 

body { 
margin:0; 
padding:0; 
min-width:525px; 
font-family: Arial; 
font-size: 17px; 
background-image:url('fifa2.jpg'); 
} 

#header { 
float: left; 
width: 100%; 
height: 100px; 
position: absolute; 
backgroundcolor: 

} 


#footer { 
float: left; 
width: 100%; 
background-color: #000000; 
font-size: 14pt; 
font-weight: bold; 
text-align: center; 
position: absolute; 
height: 40px; 
left: 0px; 
bottom: 0px; 
} 

#wrapper { 
padding-left: 200px; 
padding-right: 125px; 
overflow: hidden; 
} 

#left_side { 
position: relative; 
float: left; 
width: 200px; 
right: 200px; 
margin-left: -100%; 
padding-bottom: 2000px; 
margin-bottom: -2000px; 
} 

#right_side { 
position: relative; 
float: left; 
width: 125px; 
background-color: #66CCCC; 
margin-right: -125px; 
padding-bottom: 2000px; 
margin-bottom: -2000px; 
} 

#content_area { 
position: relative; 
float: left; 
width: 100%; 
padding-bottom: 2000px; 
margin-bottom: -2000px; 
} 


#nav { 
background-color: #222; 
} 
#nav_wrapper { 
width: 350px; 
margin: 0 auto; 
text-align: left; 
} 
#nav ul { 
list-style-type: none; 
padding: 0; 
margin: 0; 
position: relative; 
min-width: 200px; 
} 
#nav ul li { 
display: inline-block; 
} 
#nav ul li:hover { 
background-color: #333; 
} 
#nav ul li a, visited { 
color: #CCC; 
display: block; 
padding: 15px; 
text-decoration: none; 
} 
#nav ul li:hover ul { 
display: block; 
} 
#nav ul ul { 
display: none; 
position: absolute; 
background-color: #333; 
border: 5px solid #222; 
border-top: 0; 
margin-left: -5px; 
} 
#nav ul ul li { 
display: block; 
} 
#nav ul ul li a:hover { 
color: #699; 
} 


video { 
margin-top: 250px; 
}

image:

источник

2014-08-23 Miro Sarkkinen

Ваш HTML форматирование неправильно. Измените его, как показано ниже

FIDDLE DEMO

<div id="header"> 
<div id="nav"> 
    <div id="nav_wrapper"> 
     <ul> 
      <li><a href="#">HOME</a> 

      </li> 
      <li> <a href="#">dropdown #1</a> 

       <ul> 
        <li><a href="#">dropdown #1 item #1</a> 

        </li> 
        <li><a href="#">dropdown #1 item #2</a> 

        </li> 
        <li><a href="#">dropdown #1 item #3</a> 

        </li> 
       </ul> 
      </li> 
      <li> <a href="#">dropdown #2</a> 

       <ul> 
        <li><a href="#">dropdown #2 item #1</a> 

        </li> 
        <li><a href="#">dropdown #2 item #2</a> 

        </li> 
        <li><a href="#">dropdown #2 item #3</a> 

        </li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
    <!-- Nav wrapper end --> 
</div> 
<div id="wrapper"> 
    <div id="content_area"> 
     <p></p> 
    </div> 
</div> 
<DIV ID="footer">Hello and Welcome --------------</DIV>

источник

2014-08-23 10:29:16 Richa

спасибо, сейчас это работает :) !! –

Я призываю вас использовать jQuery UI's Menu.

Пример (взял со страницы выше):

<!doctype html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Menu - Default functionality</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <script> 
     $(function() { 
     $("#menu").menu(); 
     }); 
    </script> 
    <style> 
     .ui-menu { width: 150px; } 
    </style> 
    </head> 
    <body> 

    <ul id="menu"> 
     <li class="ui-state-disabled">Aberdeen</li> 
     <li>Ada</li> 
     <li>Adamsville</li> 
     <li>Addyston</li> 
     <li>Delphi 
     <ul> 
      <li class="ui-state-disabled">Ada</li> 
      <li>Saarland</li> 
      <li>Salzburg an der schönen Donau</li> 
     </ul> 
     </li> 
     <li>Saarland</li> 
     <li>Salzburg 
     <ul> 
      <li>Delphi 
      <ul> 
       <li>Ada</li> 
       <li>Saarland</li> 
       <li>Salzburg</li> 
      </ul> 
      </li> 
      <li>Delphi 
      <ul> 
       <li>Ada</li> 
       <li>Saarland</li> 
       <li>Salzburg</li> 
      </ul> 
      </li> 
      <li>Perch</li> 
     </ul> 
     </li> 
     <li class="ui-state-disabled">Amesville</li> 
    </ul> 


    </body> 
</html>

источник

2014-08-23 10:26:02

спасибо теперь он работает !! –

Html и css: выпадающее меню не работает

ответ

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