Question

在提出这个问题之前，我尝试过研究并尝试给定的结果，但是如果光标进入td你可以单击其中的链接，那么我无法做到这一点。我曾经做过一次，但不记得或想出来。

这是HTML：

<table>
<tr>

    <td class="nav" align="center" valign="center" width="125" height="35">
<ul class="nav"><li class="nav">
<font size="4" color="#BE2625">
<a href="#">
Home
</a>
</font>
</li></ul>
    </td>          

    <td class="nav" align="center" valign="center" width="125" height="35">
<ul class="nav"><li class="nav">
<font size="4" color="black">
<a href="">
Menu
</a>
</font>
</li></ul>
    </td>



        <td class="nav" align="center" valign="center" width="125" height="35">
<ul class="nav"><li class="nav">
<font size="4" color="black">
<a href="">
Info
</a>
</font>
</li></ul>
    </td>  

</tr>
</table>

这是CSS：

ul.nav{
    text-decoration: none;
    display: table-cell;
        padding: 0px;
        list-style: ;
    color: black;
    }

ul li.nav{
    float: left;
        width: 100%;
        text-align: center;
    text-decoration: none;
    list-style-type: none;
    color: black;
    padding: 0px;
     }

ul li.nav:hover{
    float: left;
    text-align: center;
    text-decoration: none;
    list-style-type: none;
    text-valign: bottom;
    color: black;
     }

ul li a{
    margin: 0px;
    display: table;
        padding: 5px 0px 5px 0px;
    text-decoration: none ;
    border: 1px solid;
    border-radius: 3px;
    border-color: transparent; 
    color: black;
    width: 100%;
    height: 100%;

    }

ul li a.nav:hover{
    text-align: center;
    background:transparent;
    color: black;
    width: 100%;
    height: 100%;
    display: table;
    }

ul li ul.nav{
    width: 25%;
    display: none ;
    color: black;
    }

ul li.nav:hover ul{
    float: center;
    opacity: .87;
    position: absolute;
        display: block; /* display the dropdown */
    color: black;

}

td.nav {
    border: 5px solid;
    border-radius: 100px;
    border-color: #FAEBD7; 
    color: black;
    background-color: #FAEBD7;
}

td a.nav {
    width: 100%;
    height: 100%;
    display: table;
}

td a.nav: hover{
    width: 100%;
    height: 100%;
    display: table;
}

td.nav:hover{
    color: black;    
        background: #ed1a3b;
    border: 5px solid;
    border-radius: 100px;
    border-color: #FAEBD7; 
    }

这是jsfiddle：

http://jsfiddle.net/9kat4ztL/1/

提前感谢您的帮助，如果问题不够明确，请告诉我有什么问题，我会做出更改。

Answer 1

好吧，没有提到你糟糕的标记和不当使用它，这是一种方式：

JSFiddle

我们的想法是为position: relative设置td，并使用a，top: 0;，left: 0;将display: block置于其中{}} p>

Answer 2

使用较少的html和css创建菜单，同时为<a>标记添加样式而不是<li>

ul.nav {
  text-decoration: none;
  padding: 0px;
  list-style: none;
  color: black;
}
ul.nav li{
  display: inline-block;
  text-align: center;
  padding: 0px;
}
ul.nav li a {
  margin: 0px;
  text-decoration: none;
  border: 5px solid;
  border-color: transparent;
  color: black;
  background-color: #FAEBD7;
  display: block;
  border-radius: 100px;
  padding: 13px 44px;
}
ul.nav li a:hover {
  text-align: center;
  color: black;
  background: #ed1a3b;
  border: 5px solid;
  border-color: #FAEBD7;
}

<ul class="nav">
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="">Menu</a>
  </li>
  <li>
    <a href="">Info</a>
  </li>
</ul>

如何制作一个完整的链接

2 个答案: