个人中心
gpt4 book ai didi

css - 水平 CSS 子导航问题!

转载 作者：行者123 更新时间：2023-11-28 13:49:32 25 4
gpt4 key购买 nike

我一直在努力让我的子导航在相关页面上处于事件状态，并且已经拖网论坛等几天/几周了!我对 CSS 很陌生，非常感谢任何帮助!我已经设法使用#current 使顶部导航按钮处于事件状态，但子导航没有跟随。我知道我可能错过了一些非常基本的东西，但我就是不明白!我希望它以与 www.forbes.com 类似的方式工作(通过另一个人的问题看到这个，以为我也很接近!!)任何帮助都会很棒。谢谢丽贝卡

请看下面的 CSS.....

<style>
ul#topnav {
 margin: 0 ; padding: 0 ;
 float: left;
 width: 955;
 list-style: none;
 position: relative;
 font-size: 12px;
 background: url(images/testbut.jpg) repeat-x;
}
ul#topnav :hover {
 font-family:Arial, Helvetica, sans-serif; 
 font-size:12px; color: #CCCCCC;
}
ul#topnav li {
 float: left;
 margin: 0; padding: 0;
 border-right: 1px solid #ffffff; /*--Divider for each parent level links--*/
}
ul#topnav li a {
 padding: 10px 27.5px;
 display: block;
 color: #f0f0f0;
 background-image: url(images/testbut.jpg) repeat-x;
 text-decoration: none;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
} 
ul#topnav li span {
 float: left;
 padding: 10px 0;
 position: absolute;
 left: 0; top:35px;
 display: none; 
 width: 100%;
 color: #fff;
 /*--Bottom right rounded corner--*/
 -moz-border-radius-bottomright: 5px;
 -khtml-border-radius-bottomright: 5px;
 -webkit-border-bottom-right-radius: 5px;
 /*--Bottom left rounded corner--*/
 -moz-border-radius-bottomleft: 5px;
 -khtml-border-radius-bottomleft: 5px;
 -webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; background: #6a6a6a url() repeat-x;} /*--Show subnav on hover--*/
ul#topnav li span a { display: inline;} 
ul#topnav li span a:hover { font-family:Arial, Helvetica, sans-serif; font-size:12px;}
ul#topnav a#current { background: #6a6a6a url() repeat-x;}
</style>

最佳答案

我不太确定从哪里开始使用您现有的代码，因此，我从头开始整理了一个工作示例。请注意，提供的示例非常基础，只是实现既定目标的一种方式。我已经在 Firefox 3.6 上测试过它，没有别的。可能存在跨浏览器兼容性问题，尤其是 Internet Explorer 中的 :hover 伪类。此代码背后的想法只是为您提供一个简单的工作框架。

我强烈建议您查看以下文章，因为它们解释了嵌套列表的使用、跨浏览器兼容性问题、:hover 伪类 IE 问题的 Javascript 解决方案，以及使用 display: none 隐藏元素的可访问性问题:

Suckerfish 下拉菜单
http://www.alistapart.com/articles/dropdowns

Son of Suckerfish 下拉菜单
http://www.htmldog.com/articles/suckerfish/

用 CSS 隐藏:问题和解决方案
http://www.456bereastreet.com/archive/200905/hiding_with_css_problems_and_solutions/

好的，进入代码。首先，HTML。在这里，我使用了嵌套的无序列表来创建菜单结构。这是一个很好的方式，因为导航菜单实际上只是一个嵌套的链接列表。对于那些不使用 CSS 的人来说，这将正确显示，并且屏幕阅读器将正确阅读。

您可能希望研究从事件页面中删除链接的方法。例如，如果事件页面是第 1-3 页，您可以将 a 标记替换为 span 标记。

HTML 应该是相当 self 解释的。只需给事件菜单 UL active 类:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="test.css" media="screen" />
<title>Horizontal Menus</title>
</head>

<body>
    <div id="topnav">
        <ul>
            <li>Menu 1
                <ul class="active">
                    <li><a href="#">Page 1-1</a></li>
                    <li><a href="#">Page 1-2</a></li>
                    <li><a href="#">Page 1-3</a></li>
                    <li><a href="#">Page 1-4</a></li>
                </ul>
            </li>

            <li>Menu 2
                <ul>
                    <li><a href="#">Page 2-1</a></li>
                    <li><a href="#">Page 2-2</a></li>
                    <li><a href="#">Page 2-3</a></li>
                    <li><a href="#">Page 2-4</a></li>
                    <li><a href="#">Page 2-5</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

CSS 中充满了注释，因此应该相当容易理解。我认为最难的部分是正确设置格式，并使子菜单水平而不是垂直。你已经做到了这一点，所以剩下的应该很容易:

/*
 * The contain DIV for the navigation menu.
 * Use this to position the menu on the page.
 */
#topnav {
    /*
     * Set the containing DIV position to
     * relative.  This allows the UL to be
     * positioned relative to this container.
     * See static, relative and absolute, here:
     * http://www.w3.org/TR/CSS2/visuren.html#choose-position
     */
    position: relative;
}

/*
 * All ULs (first and second level).
 */
#topnav ul {
    /*
     * Remove bullets from the UL.
     */
    list-style: none;
    /*
     * Zero margins and padding.
     */
    margin: 0;
    padding: 0;
    /* 
     * Take the UL out of the normal flows so
     * that it can be given absolute positioning
     * coordinates, relative to its containing
     * block (the #topnav DIV).
     */
    position: absolute;
    /*
     * Align the UL with the left of the #topnav DIV.
     */
    left: 0;
    /*
     * The list must be wide enough to enclose all
     * second level list items (5 x 10em).
     */
    width: 50em;
    /*
     * Give the UL height and a background colour.
     * This enables the UL that is activated during a
     * hover to mask the UL that is active.  See
     * the active and hover z-index settings.
     */
    height: 1.5em;
    background: #eeeeee;
}

/*
 * All LIs (first and second level).
 */
#topnav li {
    /*
     * Float the LIs left so that they all
     * appear on one line.
     */
    float: left;
    /*
     * Set the width of each LI.
     */
    width: 10em;
}

/*
 * Second level UL.
 */
#topnav ul ul {
    /*
     * Hide all second level LIs.
     * Set their position to absolute, then
     * move them left by 999em.
     */
    position: absolute;
    left: -999em;
}

/*
 * Second level UL.
 * Selected when first-level LI is hovered over,
 * or when first-level UI has the 'active' class.
 */
#topnav ul li:hover ul, #topnav ul ul.active {
    /*
     * Show active LIs.
     * Reset the left position to zero.
     */
    left: 0;
}

/*
 * Second level UL.
 * Selected when first-level LI is hovered over.
 */
#topnav ul li:hover ul {
    /*
     * Set the stacking level (z-index) so that it is
     * above the active UL.
     */ 
    z-index: 200;
    background: #cccccc;
}

/*
 * Second level UL.
 * Selected when first-level UI has the 'active' class.
 */
#topnav ul ul.active {
    /*
     * Set the stacking level (z-index) so that it is
     * below the UL that is displayed during hover.
     */ 
    z-index: 100;
    background: #aaaaaa;
}

祝你好运!

关于css - 水平 CSS 子导航问题!，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3085712/

25 4 0
文章推荐： ios - 表格 View 单元格无法进入 numberOfRowsInSection
文章推荐： css - 如何在同一顶层的内容 div 中左右对齐 div？
文章推荐： javascript - Uncaught ReferenceError : Invalid left-hand side in assignment
文章推荐： css - 在不破坏设计的情况下将 CSS 文件的一部分输入到另一个文件中
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com