定位和毛病的导航按钮问题

我在网站上工作，我想有一个导航栏设置在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>

来源

2011-02-24 khop

看起来以为你的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/

来源

2011-02-24 00:59:58 Dan

正如您可以猜到，这是一个问题，当你徘徊，所以它在：悬停规则：

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

正如你所看到的，连接（标签）被设置为右：0，你一直在向右边移动。

我不确定你在这里试图做什么，但我不认为你想让链接突然定位。如果你的目标是制作一个浮动窗口而不是你想要的绝对位置，而不是链接。

来源

2011-02-24 00:46:23

定位和毛病的导航按钮问题

回答

相关问题