Question

My code:

<ul class='sub-menu'>
  <li><a href='something'>something</a></li>
  <li><a href='else'>else</a></li>
  <li><a href='another'>another</a></li>
</ul>

I can click on the outside of any of the list items(li), and the link won't open (like there is padding between the link itself and the list item it lives in). I want to be able to click on any part of the list item and for the link inside of it to open.

I've been fiddling with inline CSS to try and force the behavior I want but still no luck. Help?

Answer 1

在锚点上创建一个伪元素，它涵盖了列表项，包括项目符号：

.sub-menu li {
  position: relative;  /* to contain the absolute-positioned pseudo-element */
}

.sub-menu a:before {
  content: '';         /* required for most pseudo-elements */
  position: absolute;  /* absolutely positioned */
  top: 0;              /* ... at top of its list item */
  left: -50px;         /* ... to the left of its list item, including the bullet */
  right: 0;            /* to its list item's right */
  height: 100%;        /* the height of its list item */
}

<强>段：

.sub-menu li {
  position: relative;  /* to contain the absolute-positioned pseudo-element */
}

.sub-menu a:before {
  content: '';         /* required for most pseudo-elements */
  position: absolute;  /* absolutely positioned */
  top: 0;              /* ... at top of its list item */
  left: -50px;         /* ... to the left of its list item, including the bullet */
  right: 0;            /* to its list item's right */
  height: 100%;        /* the height of its list item */
}

<ul class='sub-menu'>
  <li><a href='something'>something</a></li>
  <li><a href='else'>else</a></li>
  <li><a href='another'>another</a></li>
</ul>

Answer 2

给ul一个font-size：0;然后在列表项或锚元素上设置font-size。

如何删除我的链接<a> and the list item it lives in <li>? or... click on </li></a> <li> <a> opens the link inside of it?

2 个答案: