html - 活跃的最后一次悬停-6ren

html - 活跃的最后一次悬停

转载作者：行者123 更新时间：2023-11-28 12:22:20

24

4

我只有简单的 HTML + CSS 菜单。

https://dl.dropboxusercontent.com/u/73908828/ccs_help/home.html

<head>
  <style>
  *, body {
    padding:0px;
    margin: 0px;
    font-family: "Arial";
  }

  #line {
    position: absolute;
    height:62px;
    width: 100%;
    top: 408px;
    z-index:1;
    border-top: 1px solid #636363;
    border-bottom: 2px solid #393939;
    background-color: #0a0c0c;
    -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 1);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 1);
  }
  #menu-box, #menu {
    width: 990px;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  #menu {
    height:62px;
  }
  #menu ul.c {
    list-style-type: none;
  }

  #center ul a.c {
    font-size: 34px;
    font-weight: bold;
    line-height: 65px;
    letter-spacing: 0px;
    display: block;
    padding-left: 30px;
    padding-right: 30px;
    background-repeat: no-repeat;
    background-position: right;
    text-decoration: none;
    color: #505050;
  }
  #center ul a.c:hover {
    color: #038aff;
  }
  ul#nav {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  ul#nav li {
    display: inline;
  }
  ul#nav li a {
    float: left;
    line-height: 40px;
    text-decoration: none;
  }
  ul#nav .current a, ul#nav li:hover > a {
    text-decoration: none;
  }
  ul#nav ul {
    display: none;
  }
  ul#nav li:hover > ul {
    position: absolute;
    display: block;
    margin: 65px 0 0 0;
    font-size: 14px;
    letter-spacing: 1px;
    color: #a4a4a4;
    float:left;
    left:50%;
    text-align:center;
  }
  ul#nav li:hover > ul li {
    position:relative;
    right:50%;
    display: table;
  }
  ul#nav li:hover > ul li a {
    float: left;
    text-decoration: none;
  }
  ul#nav li:hover > ul li a:hover {
    text-decoration: none;
    text-shadow: none;
  }
  .submenu {
    background-color: #000;
    display:table-cell;
    vertical-align: middle;
    border-bottom: 1px solid #393939;
    white-space: nowrap;
  }
  </style>
</head>
<body>
  <div id="line">
    <div id="menu-box">
      <div id="center">
        <ul id="nav" class="c">
          <li><a id="products" href="javascript:;" class="c" style="padding-left:0px;">PRODUCTS</a>
            <ul>
              <li class="outer">
                <div class="submenu-left"></div>
                <div class="submenu">SECOND_PRODUCTS</div>
                <div class="submenu-right"></div>
              </li>
            </ul>
          </li>
          <li><a href="MAIN_SUPPORT_URL" class="c">MAIN_SUPPORT</a>
            <ul>
              <li class="outer">
                <div class="submenu-left"></div>
                <div class="submenu">SECOND_SUPPORT</div>
                <div class="submenu-right"></div>
              </li>
            </ul>
          </li>
          <li><a id="sale" href="javascript:;" class="c" style="background-image: none; padding-right: 0px;">DISTRIBUTION</a>
            <ul>
              <li class="outer">
                <div class="submenu-left"></div>
                <div class="submenu">SECOND_DISTRIBUTION</div>
                <div class="submenu-right"></div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div id="main">
    <div class="lgflags"><a href="?lang=en" class="en"></a><a href="?lang=de" class="de"></a></div>
    <div class="img"></div>
  </div>
</body>

我的问题是，我如何做到即使没有鼠标悬停也始终显示第二个菜单？我需要最后一个悬停菜单始终可见。

我只使用 HTML 和 CSS，但如果需要，可以使用 JavaScript 或 jQuery。

最佳答案

将悬停样式应用到您的第二个菜单，使用

nth-child(2)

例如，

ul#nav li:hover > ul, ul#nav li:nth-child(2)> ul {
    position: absolute;
    display: block;
    margin: 65px 0 0 0;
    font-size: 14px;
    letter-spacing: 1px;
    color: #a4a4a4;
    float:left;
    left:50%;
    text-align:center;
}

关于html - 活跃的最后一次悬停，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18785151/

24

4

0

文章推荐： android - 在每个移动设备上强制使用相同的字体大小

文章推荐： asp.net - 下拉列表出现在 ajaxmodalpopup 后面

文章推荐： jQuery onResize 图像定位问题

scala - 从尝试返回一个值 - 最后
这个问题在这里已经有了答案: “return” and “try-catch-finally” block evaluation in scala (2 个回答) 7年前关闭。为什么method1返
jquery 选择器之前-最后
我有一个动态列表，需要选择最后一项之前的项目。 drag your favorites here var lastLiId = $(".album
JMeter Once Only Controller 最后
我想为每个线程执行特定操作，因此，我认为tearDown Thread Group 不起作用。是否有任何替代方法可以仅在线程的最后一次迭代时运行“仅一次 Controller ”？谢谢。最佳答案
Perl && 做 { 最后; };
在我的书中它使用了这样的东西: for($ARGV[0]) { Expression && do { print "..."; last; }; ... } for 循环不完整吗？另外，do 的意义何
JMeter Once Only Controller 最后
我想为每个线程执行特定操作，因此，我认为tearDown Thread Group 不起作用。是否有任何替代方法可以仅在线程的最后一次迭代时运行“仅一次 Controller ”？谢谢。最佳答案
c# - 最后:是否保证在任何情况下都会被调用
有没有可能 finally 不会被调用但应用程序仍在运行？我在那里释放信号量 finally { _semParallelUpdates.Re
css - 最后，有时倒数第二
我收藏了对齐的元素，以便它们形成两列。使用 nth-last-child 的组合和 nth-child(even) - 或任何其他选择器 - 是否可以将样式应用于以下两者之一:a)最后两个(假设
c# - 最后，是什么触发了捕获变量的新实例？
我正在阅读 Jon Skeet 的 C# in Depth . 在第 156 页，他有一个示例， list 5.13“使用多个委托(delegate)捕获多个变量实例化”。 List list = n
excel - 最后 4 个结果的总和形成具有多个条件的列
我在 AM4:AM1000 范围内有一个数据列表(从上到下有间隙)，它总是被添加到其中，我想在其中查找和总结最后 4 个结果。但我只想找到与单独列相对应的结果，范围 AL4:AL1000 等于单元格
PowerShell 尝试/捕获/最后
我最近编写了一个运行良好的 PowerShell 脚本 - 然而，我现在想升级该脚本并添加一些错误检查/处理 - 但我似乎被第一个障碍难住了。为什么下面的代码不起作用？ try { Remove-
python - 最后 else if 语句不打印
这个问题在这里已经有了答案: Why does "a == x or y or z" always evaluate to True? How can I compare "a" to all of
django 最后 30 个条目列表及计数
使用 Django 中这样的模型，如何检索 30 天的条目并计算当天添加的条目数。 class Entry(models.Model): ... entered = models.Da
java - 最后 block 不设置java中变量的值
我有以下代码。 public static void main(String[] args) { // TODO Auto-generated method stub
python - 最后 else if 语句不打印
这个问题在这里已经有了答案: Why does "a == x or y or z" always evaluate to True? How can I compare "a" to all of
java - 尝试/最后 - 工作面试
这个问题已经有答案了: Multiple returns: Which one sets the final return value? (7 个回答) 已关闭 8 年前。我正在经历几个在工作面试中
python3 : how to print groupby. 最后()？
$ cat n2.txt apn,date 3704-156,11/04/2019 3704-156,11/22/2019 5515-004,10/23/2019 3732-231,10/07/201
c++ - 最后 5 个元素的读取访问权限
我可以在 C/C++ 中设置/禁用普通数组最后几个元素的读(或写)访问权限吗？由于我无法使用其他进程的内存，我怀疑这是可能的，但如何实现呢？我用谷歌搜索但找不到。如果可以，怎样做？因为我想尝试这样
C# - 将键盘事件发送到(最后)选定窗口
我想使用在这里找到的虚拟键盘组件 http://www.codeproject.com/KB/miscctrl/touchscreenkeyboard.aspx就像 Windows 中的屏幕键盘 (O
php - 选择 *，最后(日期时间)
我正在运行一个 while 循环来获取每个对话的最新消息，但是我收到了错误 [18-Feb-2012 21:14:59] PHP Warning: mysql_fetch_array(): supp
Python 最后 60 个月末
这个问题在这里已经有了答案: How to get the last day of the month? (44 个答案) 关闭 8 年前。这是我在这里的第一篇文章，所以如果我做错了请告诉我...

首页

博学

6Ren·AI

商城

html - 活跃的最后一次悬停