Question

对于一个学校项目，我不得不自己创建一个网站，除了我的navibar之外，我已经完成了很多工作。我的navi的样子就是一个例子 - http://www.regent-college.edu/。当我将鼠标悬停在某个链接上时，它会向下移动并显示一个下拉列表。然而，当我的鼠标在下拉列表中时，它会重新上升，使得我的下拉似乎漂浮在空中，与摄政大学的导航相比。有办法解决这个问题吗？

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;}

感谢您的时间：）

Answer 1

更改

#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;}

当鼠标处于下拉列表时，Navbar会向上移动

1 个答案: