Question

我正在尝试使用表格的下拉菜单导航器，但我遇到了问题。我隐藏了表格的可见性，并使用悬停使其可见，但它不起作用 - 它仍然不可见。这是代码：

           table
    {
        background-color: #a9a9a9;
        border-collapse: collapse;
    }
    a:hover
    {   
        color: #f0e68c;
    }
    a
    {
        color: white;
        text-decoration: none;
    }
    .table2
    {
        position: relative;
        left: 685;
        visibility: hidden;
    }
    .table2 th
    {
        border-top: 1px solid white;
    }


        .table1 th
    {
        border-left: 1px solid white;
    }

    #home:hover
    {
        background-color: black;
    }
    #register:hover
    {
        background-color: black;
    }
    #login:hover
    {
        background-color: black;
    }
    #download:hover
    {
        background-color: black;
    }
    #other:hover
    {
        background-color: black;
    }
    #other:hover .table2
    {
        visibility: visible;
    }

Answer 1

除了表示表格数据之外，你真的不应该使用表格。使用没有表格的CSS定位元素有点棘手，但通过阅读盒子模型以及不同的显示选项如何工作，你将会发现它。

Box模型和定位

对于导航菜单，您应该使用ul，这是执行此操作的标准方法。

Answer 2

我的网站上有一个教程，向您展示如何仅使用CSS和HTML创建下拉菜单，您也可以下载完整的代码。正如其他人所说，你应该只使用表来显示表格数据。

CSS3 Dropdown Menu Tutorial

使用表格的CSS下拉菜单导航器

2 个答案: