HTML和CSS：下拉菜单将不起作用
[英]Html and css: drop down menu wont work
问题描述
我在页面顶部有一个下拉菜单，我试图将其放在页面中央。 它不会居中，现在的下拉效果将不起作用。 如果您能解决这个问题，我将不胜感激，或者您可以向我展示另一个很酷的下拉菜单，该菜单将起作用。
<!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;
}
2 个解决方案
解决方案1
1 已采纳 2014-08-23 10:29:16
您的HTML格式错误。 如下更改
<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>
解决方案2
0 2014-08-23 10:26:02
我鼓励您使用jQuery UI的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>
下拉菜单bootsrap 3将无法正常工作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.