为什么整个宽度都是可点击的,我该如何更改?
显然,唯一可点击的区域应该是可见的文本,没有别的。
我试过 display: inline-block 但它弄乱了菜单。
谢谢。
HTML
<div class="wrapper">
<ul>
<li class="menu-level-1"><a href="#">Item 1</a>
<ul class="menu-level-2">
<li><a href="#">Item 1-1</a></li>
<li><a href="#">Item 1-2</a></li>
</ul>
</li>
<li class="menu-level-1"><a href="#">Item 2</a>
<ul class="menu-level-2">
<li><a href="#">Item 2-1</a>
<ul class="menu-level-3">
<li><a href="#">Item 2-1-1</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu-level-1"><a href="#">Item 3</a>
<ul class="menu-level-2">
<li><a href="#">Item 3-1</a></li>
<li><a href="#">Item 3-2</a></li>
<li><a href="#">Item 3-3</a></li>
</ul>
</li>
<li class="menu-level-1"><a href="#">Item 4</a>
<ul class="menu-level-2">
<li><a href="#">Item 4-1</a></li>
<li><a href="#">Item 4-2</a></li>
</ul>
</li>
</ul>
</div>
CSS
body{
margin: 0px;
border: 0;
overflow: hidden;
}
ul {
list-style: none;
margin: 0;
padding: 0;
color: #000000;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 120px;
top: 0;
display: none;
}
ul li a {
text-decoration: none;
color: #000000;
}
.menu-level-1 {
position: relative;
top: 20px;
left: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
line-height: 15px;
letter-spacing: 0em;
text-transform: uppercase;
}
.menu-level-2 {
position: fixed;
top: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
line-height: 15px;
letter-spacing: 0em;
text-transform: uppercase;
}
最佳答案
只需更改您的 CSS 并使用 display: table。
ul li {
position: relative;
display: table;
}
关于javascript - 如何将此菜单的可点击区域限制为其文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28506109/