(我已经更新了代码以反映工作代码。下面的代码现在可以工作)
我一直在努力尝试定位子菜单。为了记录,我在上周完成了我的作业,试图完成这项工作,但我认为我在某个地方搞砸了我的父母/孩子关系。
我想要做的是在页面的列中放置一个菜单,然后,当悬停时,在其右侧出现一个子菜单。问题是我的菜单出现了,但是当我调整页面大小时,子菜单会到处乱跳。看起来我的相对和绝对位置是问题,但我看不到在哪里
这是我的 CSS 代码:
#col1
{
background-color:#000033;
width:15%;
height:100%;
float:left;
color:#FFF000;
font-family: bold;
font-size: 100%;
}
ul.nav li
{
position:relative;
float:left;
width:100%;
}
ul.nav a
{
display: block;
background-color:#B2B2D9;
margin-right:3%;
margin-bottom:1%;
margin-left:1%;
text-decoration:none;
border-top-color:#FFFFFF;
border-right-color:#E6E6E6;
border-bottom-color:#FFFFFF;
border-left-color:#E6E6E6;
border-top-width: 3%;
border-right-width: 3%;
border-bottom-width: 3%;
border-left-width: 3%;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
padding: 2%;
}
ul.nav
{
position:relative;
list-style-type: none;
padding-left:0px;
line-height:1.5em;
}
ul.nav2 a
{
display: block;
background-color:#000033;
border:solid 3px black;
padding:5%;
margin-right:0px;
margin-bottom:0%;
margin-left:0%;
text-decoration:none;
color:white;
border-top-color:#FFFFFF;
border-right-color:#E6E6E6;
border-bottom-color:#FFFFFF;
border-left-color:#E6E6E6;
}
ul.nav2
{
position:absolute;
top:0;
left:100%;
display:none;
font-size:100%;
list-style-type: none;
width:8em;
line-height:1.5em;
float: none;
clear: none;
margin: 0px;
}
ul.nav2 li
{
display:block;
margin-left:-2.8em;
width:100%;
line-height:1.3em;
}
这是我的 HTML 和 JavaScript:
<script>
$(document).ready(function () {
$('.nav').hover(function (e) {
$('.nav2').slideDown('normal');
}, function () {
$('.nav2').slideUp('normal');
});
});
</script>
</head>
<body>
<div id="banner">
<img src="images/banner.jpg" width="100%" alt="banner" />
</div>
<div id="wrapper">
<div id="col1">
<ul class="nav">
<li><a href="http://www.ahome.com">Home</a></li>
<li><a href="http://www.ab.com">About</a></li>
<ul class="nav2">
<li><a href="http://www.albio.com">Bio</a></li>
<li><a href="http://www.acred.com">Credentials</a></li>
<li><a href="http://www.aled.com">Education</a></li>
</ul>
<li><a href="http://www.anew.com">New Listings</a></li>
<li><a href="http://www.afeat.com">Featured Home</a></li>
<li><a href="http://www.atow.com">Town Facts</a></li>
<li><a href="http://www.acme.com">Contact Me</a></li>
</ul>
</div>
<div id="main">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
</div>
</div>
</body>
</html>
如您所见,我的菜单是问题所在。有人可以让我指出正确的方向吗?