【问题标题】：CSS make div selectable instead of text?CSS使div可选择而不是文本？
【发布时间】：2013-12-13 09:24:29
【问题描述】：

我有一个导航下拉元素，我想将其设为可选 - 目前该链接仅在文本悬停时有效，而不是围绕它的框。有没有办法可以在 CSS 中做到这一点。

我的 CSS 代码：

.main-menu {
position: absolute;
top:90px;
right:0px;
text-align: right;
 z-index: 2000;
}

.main-menu ul {
width: 50%;
background-color: #333;
 display: inline;
margin: 0;
padding: 20px 5px;
list-style: none;
color: #fff;
}
.main-menu ul li {
display: inline-block;
margin-right: -10px;
position: relative;
padding: 17px 15px;
cursor: pointer;
color: #fff;
font-size: 14px;
font-weight: 700;
 }
.main-menu ul li a {
color: #fff;
border: none;
}
.main-menu ul li a:hover {
color: #f1c40f;
}
/* sub menu */
.main-menu ul li ul {
position: absolute;
top: 25px;
left: 0;
min-width: 150px;
opacity: 0;
margin: 10px 0px;
padding: 17px 5px 0px 5px;
visibility: hidden;
text-align: left;
}
.main-menu ul li ul li {
display: block;
color: #fff;
margin: 0px -5px;
}
.main-menu ul li ul li:hover {
background: #666;
color: #f1c40f;
}

.main-menu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}

Jsfiddle 是：http://jsfiddle.net/9BdTK/

【问题讨论】：

标签： css drop-down-menu navigation

【解决方案1】：

方法一

您可以简单地将<a></a> 移出<li>。

E.G：

<a href="#nowhere" title="Home"><li>Home</li></a>

DEMO HERE

注意：我只对前两个链接做了这个。

方法二

更好的方法如下：

HTML：

<div id="con">
    <ul>
        <li><a href="#test1">Test</a></li>
        <li><a href="#test2">Test</a></li>
        <li><a href="#test3">Test</a></li>
    </ul>
</div>

CSS：

#con {
    width: 100%;
    background: #eee;
    text-align: center;
}
ul {
    list-style: none;
}
li {
    display: inline-block;
    width: 80px;
    height: 50px;
    outline: 1px solid #000;
}

a {
    display: block;
    height: 100%;
    width: 100%;
}

将<a> 保留在里面并将其设置为display: block;，然后将width 和height 设置为100%，这将占用整个div 创建一个div 链接。

div 链接演示 - DEMO HERE

悬停演示 - DEMO HERE

希望这会有所帮助。

【讨论】：

方法 2 更好，因为将 <li> 以外的任何内容放在 <ul> 中是非法标记
@SLC 同意，我确实输入了“更好的方法如下：”让他们知道这是更好的方法。

【解决方案2】：

我的网站上有这个，但我也设法从这个网站上做到了。

看看：

不要在“li”项中添加填充。而是将锚标记设置为显示：内联块；并对其应用填充。作者：Stussa

如上所说：Make whole area clickable

祝你好运

【讨论】：