html - 定位和故障导航按钮问题-6ren

html - 定位和故障导航按钮问题

转载作者：太空宇宙更新时间：2023-11-04 05:25:45

26

4

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

最佳答案

看来您的 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/

关于html - 定位和故障导航按钮问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5099070/

26

4

0

文章推荐： html - float :left problem

文章推荐： linux - 从文件中打印 IFS 值

文章推荐： linux - 接受可选参数的 Shell 脚本

文章推荐： c - C中文件的最大和最小数量

JavaScript 故障
有人可以解释一下为什么这个脚本不起作用吗？ function destroy(ID) { if (confirm("Deleting is a very bad thing! Sure?")
wcf - Silverlight 故障
我正在尝试使 WCF Silverlight 故障按此方式工作: MSDN aricle 将 SL 故障添加到我的 Web.config 文件后，我收到以下警告: The element 'behav
Haskell mod 故障？
这是我要删除的 Haskell 函数 2::Int和 5::Int从列表中: remPrimesFactors25 :: [Int] -> [Int] remPrimesFactors25 [] =
FFmpeg DTS 故障
当我想用 ffmpeg 连接和录制两个 mp4 视频时，我遇到了这个问题。我得到的输出是: [concat @ 0x2566e80] DTS 4079 #0:0 (h264 (native) ->
delphi - SetCursorPos 故障？
我想在delphi中编写一个程序来模拟以特定速度移动的鼠标指针(类似于AutoIT MouseMove函数)。要么是我的代码错误，要么是 SetCursorPos 在被调用太多次后出现故障。这是我的功
JavaScript 故障，无法正确重定向
我将“wa、or 和 id”(来自这些州的访问者)设置为重定向到 website1.com - 当我访问该网站时，它会将我重定向到 website1.com(因此它知道我在 WA) 。但如果我将 wa
WCF - 故障/异常与消息
我们目前正在争论通过 WCF channel 抛出错误与传递指示状态或服务响应的消息是否更好。故障带有 WCF 的内置支持，您可以使用内置的错误处理程序并做出相应的 react 。然而，这会带来开销
r - c() 故障？
不确定我在这里做错了什么，如果有任何帮助，我们将不胜感激。尝试创建一个名为“control”的新变量，并在行变量等于这些数字时将其编码为 1，否则编码为 0。 data$control= ifels
.net - 遥测采样而不影响错误/故障
我想在应用洞察中记录成功调用的百分比。我看到这篇文章https://learn.microsoft.com/en-us/azure/azure-monitor/app/sampling我认为固定速率采
python - 如何区分Python或Matlab是否错误/故障？
我正在尝试使用 SVD 和特征分解来使用动态模式分解进行一些数据分析。我遇到了一个简单的问题，即从 Matlab 和 Python 获得不同的结果。我很困惑，不知道为什么 Python 给我错误的结果
php - 我迫切需要帮助来排除mysqli_error()故障。
This question already has an answer here: mysqli_fetch_assoc() expects parameter / Call to a member
c - 结构链接表分段-故障
我刚刚开始我的一个实验室，在那里我计算类(class)的 GPA，其信息存储在结构的链接列表中。截至目前，我正在尝试打印所有类(class)信息，以确保它们已正确初始化并添加到链接列表中。我遇到了一
c++ - GetWindowText 故障
我正在尝试学习如何使用 visual studio 为 C++ 制作 GUI。但是我在使用 GetWindowText() 函数时遇到了一些问题。它不会将 LPTSTR 标题更改为文本框中的文本，并且
ios - NSNumberFormatter 故障
我有一个奇怪的问题。它似乎只出现在测试者的 iPhone 5s 上。它可以在运行最新 iOS (8.3) 的 iPhone 5、6 和 6 plus 上正常运行。这是代码 -(NSString *)
ios - 更新核心数据记录<故障>
我正在尝试更新 Core Data 中的一些记录。我正在采取以下步骤来完成它带谓词的获取函数从核心数据中检索记录将结果集存储在对象数组中遍历数组并更新每条记录调用保存上下文我遇到了两个问题
iphone - viewWithTag 故障。
我通过 Storyboard设计了 tableView，在一个单元格中我有一个按钮和一个标签。按钮在 Storyboard上有标签 1 和标签在 Storyboard上有标签 2。在 cellForR
ios - textFieldShouldEndEditing 故障？
我实现了这个方法，当在文本字段中输入了未经授权的字符或已使用的用户名时，向用户发送多个警报 View : func textFieldShouldEndEditing(textField: UITex
C++ Rnd() 故障
伙计们，我在运行程序时遇到了这个非常奇怪的错误。这是重要的代码: 变量(编辑): const short int maxX = 100; const short int maxZ = 100; con
JavaScript 错误/故障？
我有这个修改过的 Matrix Javascript 代码，我想摆脱第一次运行的所有与自身重叠的字符串。有人知道我该如何管理吗？另外，我想在我的网页上多次使用此代码，我需要声明新变量，不是吗？但是当我
c# - COMException 故障
有谁知道是否有网站(甚至非 Microsoft)有关于 COMExceptions/HRESULTS 的详细信息。当我尝试在使用 Copy() 函数后保存我的 Excel 工作簿时，我收到此错误:

首页

博学

6Ren·AI

商城

html - 定位和故障导航按钮问题