Question

我的页面顶部有一个下拉菜单，我试图将其放在页面中心的顶部。它不会成为中心，现在下拉效果不起作用。如果你能解决这个问题我会非常感激，或者你可以给我看一个其他很酷的下拉菜单，它会起作用。

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

Answer 1

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

Answer 2

我鼓励您使用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>

Html和CSS：下拉菜单不起作用

2 个答案: