对于一个学校元素,我必须自己创建一个网站,除了我的导航栏外,我几乎已经完成了。我的 navi 的外观示例如下 - http://www.regent-college.edu/ .当我将鼠标悬停在链接上时,它会向下移动并出现一个下拉菜单。但是,当我的鼠标位于下拉菜单中时,它会返回,与 Regent College 的导航相比,这使我的下拉菜单看起来好像漂浮在空中。有办法解决吗?
HTML
<div id="nav">
<!-- start of navi bar -->
<ul id="drops">
<li><a href="enrol.html" class="enrol">Enrol</a></li>
<li><a href="#" class="donate">Donate</a>
<ul class="drop1"> <ul class="drop1text">
<li><a href="individualdonation.html">Individual Donation</a></li>
<li><a href="construction.html">Corporate Donation</a></li>
</ul> </ul>
</li>
<li> <a href="volunteer.html" class="volunteer">Volunteer</a> </li>
<li><a href="construction.html" class="photo">Photo Gallery</a></li>
<li><a href="#" class="events">Events</a>
<ul class="drop2"> <ul class="drop1text">
<li><a href="construction.html">Workshops</a></li>
<li><a href="construction.html">Upcoming Events</a></li>
<li><a href="construction.html">Past Events</a></li>
</ul></ul>
</li>
<li><a href="contactus.html" class="contactus">Contact Us</a></li>
</ul>
</div>
CSS
#nav {
float:right;
width:596px;
height:207px;
}
#drops, #drops ul {
padding:0;
margin:0;
clear:both;
float:left;
width:inherit;
}
#drops ul.drop1, #drops ul.drop2 {
float:left;
margin-top:178px;
clear:both;
z-index:1;
}
#drops ul.drop1 {
background:url(../images/donatedrop.png) top left no-repeat;
width:198px;
height:180px;
}
#drops ul.drop2 {
background:url(../images/eventsdrop.png) top left no-repeat;
width:201px;
height:180px;
}
#drops ul.drop1text {
margin-top:43px;
padding-left: 25px;
line-height:33px;
color:#666;
font-size:19px;
text-decoration:none;
letter-spacing:1px;
-webkit-text-stroke: 2px;
}
#drops ul.drop1 a:hover, #drops ul.drop2 a:hover {
color:#000;
}
#drops a {
display: block;
float:left;
clear:both;
width:160px;
z-index:2;
}
#drops li {
float: left;
}
#drops li ul {
position: absolute;
width: 12em;
left: -999em;
}
#drops li:hover ul, #drops li.sfhover ul {
left: auto;
}
/*BACKGROUP POSITIONING*/
#nav a.enrol, #nav a.donate, #nav a.volunteer, #nav a.events, #nav a.photo, #nav a.contactus {
float:right;
background: url(../images/navibar.png) no-repeat;
height:207px;
text-indent:-999999px;
z-index:2;
}
#nav a.enrol {
background-position:left top;
width:100px;
}
#nav a.donate {
background-position:-100px 0;
width:98px;
}
#nav a.volunteer {
background-position:-198px 0;
width:100px;
}
#nav a.photo {
background-position:-298px 0;
width:99px;
}
#nav a.events {
background-position:-397px 0;
width:99px;
}
#nav a.contactus {
background-position:-496px 0;
width:100px;
}
#nav a.enrol:hover { background-position:left -207px;}
#nav a.donate:hover { background-position:-100px -207px;}
#nav a.volunteer:hover { background-position:-198px -207px;}
#nav a.photo:hover { background-position:-298px -207px;}
#nav a.events:hover { background-position:-397px -207px;}
#nav a.contactus:hover { background-position:-496px -207px;}
#nav a#active1 {background-position:left -414px;}
#nav a#active2 {background-position:-100px -414px;}
#nav a#active3 {background-position:-198px -414px;}
#nav a#active4 {background-position:-298px -414px;}
#nav a#active5 {background-position:-397px -414px;}
#nav a#active6 {background-position:-496px -414px;}
感谢您的宝贵时间:)
最佳答案
改变
#nav a.enrol:hover { background-position:left -207px;}
#nav a.donate:hover { background-position:-100px -207px;}
#nav a.volunteer:hover { background-position:-198px -207px;}
#nav a.photo:hover { background-position:-298px -207px;}
#nav a.events:hover { background-position:-397px -207px;}
#nav a.contactus:hover { background-position:-496px -207px;}
到:
#nav li:hover a.enrol { background-position:left -207px;}
#nav li:hover a.donate { background-position:-100px -207px;}
#nav li:hover a.volunteer { background-position:-198px -207px;}
#nav li:hover a.photo { background-position:-298px -207px;}
#nav li:hover a.events { background-position:-397px -207px;}
#nav li:hover a.contactus { background-position:-496px -207px;}
关于html - 当鼠标处于下拉菜单时,导航栏向上移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21141536/