Html 定位和故障导航按钮问题_Html_Css

Html 定位和故障导航按钮问题

html css

Html 定位和故障导航按钮问题,html,css,Html,Css,我在一个网站上工作，我想在DIV的右下角设置一个导航栏。我已经把它安装好了，但是，每次我将鼠标悬停在按钮上，都会出现一个奇怪的小故障，将悬停的按钮放在非常正确的位置。我似乎无法找到解决这个问题的方法（无论我做什么都需要对IE友好）在Chrome、FF和Safari中测试。尽管如此 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tr

我在一个网站上工作，我想在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>


无标题文件
#头{
宽度：80%；
高度：80px；
位置：相对位置；
左边距：自动；
右边距：自动；
背景：#56A0D3；
背景图像：url（/image/bubblesTall.gif）；
z指数：5000；
垫面：5px；
颜色：#FFFFFF；
}
.菜单{
浮动：对；
宽度：80%；
位置：绝对位置；
底部：0px；
右：0px；
右边距：0px；
文字装饰：无；
高度：自动；
}
李先生{
浮动：对；
文字装饰：无；
列表样式类型：无；
}
#导航a：悬停，
#导航a：聚焦{
颜色：#ffffff；
背景：#009999；
文字装饰：无；
字体大小：14px；
右：0px；
底部：0px；
位置：绝对位置；
}
.菜单a{
浮动：左；
显示：块；
文本对齐：居中；
颜色：#5cccc；
背景#006363；
字体大小：12px；
字号：200；
文字装饰：无；
字体大小：14px；
位置：相对位置；
左侧填充：5px；
右侧填充：5px；
}
标志

正如您所猜测的，悬停是一个问题，因此在：hover规则中：

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

如您所见，链接（a标记）被设置为右侧：0。您正在将其一直移动到右侧边缘

我不确定你到底想在这里做什么，但我不认为你想让链接突然完全定位。如果您的目标是创建一个浮动窗口，那么这绝对是您想要定位的位置，而不是链接。

看起来您认为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>

下面是一个工作示例：

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