Question

我正在网站上工作，我希望有一个设置在DIV右下角的导航栏。然而，我已经把它固定到位，每当我将鼠标悬停在一个按钮上时，会发生一个奇怪的故障，将悬停的按钮放在正确的位置。我似乎无法找到解决这个问题的方法（无论我做什么都需要IE友好）。

在Chrome，FF和Safari中测试过。一切都一样。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>

#head {
    width: 80%;
    height: 80px;
    position:relative;
    margin-left:auto;
    margin-right:auto;
    background: #56A0D3;
    background-image:url(/image/bubblesTall.gif);
    z-index: 5000;
    padding-top:5px;
    color: #FFFFFF;
}

.menu {
    float:right;
    width:80%;

    position:absolute;
    bottom:0px;
    right:0px;
    margin-right:0px;
    text-decoration:none;
    height:auto;
}
.menu li {
    float:right;
    text-decoration:none;
    list-style-type:none;
}

#nav a:hover,
#nav a:focus {
    color:#ffffff;
    background:#009999;
    text-decoration:none;
    font-size: 14px;
    right: 0px;
    bottom: 0px;
    position: absolute;
}

.menu a {
    float: left;
    display:block;
    text-align:center;
    color: #5ccccc;
    background: #006363;
    font-size: 12px;
    font-weight:200;
    text-decoration:none;
    font-size: 14px;
    position:relative;
    padding-left:5px;
    padding-right:5px;
}

</style>
</head>

<body>
<div id="head">logo
<div class='menu'>

       <ul id="nav">
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About Us</a></li>
          <li><a href="gallery.html">Gallery</a></li>
          <li><a href="programs.html">Programs</a></li>
          <li><a href="prospective.html">Prospective Clients</a></li>
          <li><a href="contact.html">Contact Us</a></li>
      </ul>

</div>
</div>



</body>
</html>

Answer 1

正如您所猜测的那样，当您悬停时这是一个问题，因此它位于：悬停规则：

#nav a:hover,
#nav a:focus {
    color:#ffffff;
    background:#009999;
    text-decoration:none;
    font-size: 14px;
    right: 0px;
    bottom: 0px;
    position: absolute;
}

如您所见，链接（标签）设置为右：0。您将它一直移动到右边缘。

我不确定你到底想要做什么，但我认为你不想让链接突然定位。如果您的目标是制作一个浮动窗口而不是您想要定位的窗口，而不是链接。

Answer 2

看起来认为你的CSS是问题所在。这似乎有点矛盾。

尝试以下方法：

<强> HTML

<div id="head">logo
<div class='menu'>

       <ul id="nav">
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About Us</a></li>
          <li><a href="gallery.html">Gallery</a></li>
          <li><a href="programs.html">Programs</a></li>
          <li><a href="prospective.html">Prospective Clients</a></li>
          <li><a href="contact.html">Contact Us</a></li>
      </ul>

</div>
</div>

<强> CSS

#head {
    width: 80%;
    height: 80px;
    position:relative;
    margin-left:auto;
    margin-right:auto;
    background: #56A0D3;
    background-image:url(/image/bubblesTall.gif);
    padding-top:5px;
    color: #FFFFFF;
}

.menu {
    float:right;
    position:absolute;
    bottom:0px;
    right:0px;
    text-decoration:none;
    height:auto;
}

ul#nav li{
    float:left;
}

ul#nav li a,
ul#nav li a:visited{
    color:#ffffff;
    background:#009999;
    text-decoration:none;
    display:block;
    padding:5px;
}

ul#nav li a:hover,
ul#nav li a:active{
    color:#ffffff;
    background:#ff0000;
    text-decoration:none;
}

以下是一个有效的例子：http://jsfiddle.net/YmeKa/1/

定位和故障导航按钮问题

2 个答案: