Question

这是一个简单的菜单。

问题是a:hover。 a:hover高度必须与mainmenu div相同，但现在不是。我试图消除边界和边距，但它没有工作

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 87%;
  color: #333399;
}

#mainmenu {
  float: right;
  width: 680px;
  background-color: #BAB3D6;
  height: 23px;
  text-align: right;
  line-height: 23px;
}

#mainmenu ul {
  margin: 0px;
  border: 0px;
}

#mainmenu li {
  display: inline;
  margin-right: 20px;
  text-decoration: none;
}

#mainmenu li a {
  text-decoration: none;
}

#mainmenu li a:hover {
  background-color: #652D91;
  color: #FFFFFF;
  border: 1px solid #652D91;
}

＆＃13;

<div id="mainmenu">
  <ul>
    <li><a href="#">test</a></li>
    <li><a href="#">test 1</a></li>
    <li><a href="#">test 2</a></li>
  </ul>
</div>

＆＃13;

Answer 1

两件事：

将a设置为display:block，因为a是内联元素。
但您当前li当前display:inline需要inline-block才能将a保留为阻止级别元素

注意：我添加了box-sizing并使用padding而不是height/line-height

＆＃13;

*,
*::before,
*::after {
  box-sizing: border-box
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 87%;
  color: #339;
}

#mainmenu {
  float: right;
  text-align: right;
  width: 680px;
  background-color: #BAB3D6;
}

#mainmenu ul {
  margin: 0;
  border: 0;
}

#mainmenu li {
  display: inline-block;
  margin-right: 20px;
}

#mainmenu li a {
  text-decoration: none;
  display: block;
  padding: 12px 0
}

#mainmenu li a:hover {
  background-color: #652D91;
  color: #FFF;
}

＆＃13;

<div id="mainmenu">
  <ul>
    <li><a href="#">test</a></li>
    <li><a href="#">test 1</a></li>
    <li><a href="#">test 2</a></li>
  </ul>
</div>

＆＃13;

Answer 2

尝试以下代码。我修改了一些样式，请看一下。希望这能帮到你！

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 87%;
  color: #333399;
}

#mainmenu {
  float: right;
  width: 680px;
  background-color: #BAB3D6;
  height: 23px;
  text-align: right;
  line-height: 23px;
  position: relative;
  overflow: auto;
}

#mainmenu ul {
  margin: 0px;
  position: absolute;
  right: 0px;
  overflow: auto;
}

#mainmenu li {
  list-style: none;
  float: left;
  margin: 0px 5px;
}

#mainmenu li a {
  display: block;
  padding: 0px 10px;
  text-decoration: none;
}

#mainmenu li a:hover {
  background-color: #652D91;
  color: #FFFFFF;
}

＆＃13;

<div id="mainmenu">
  <ul>
    <li><a href="#">test</a></li>
    <li><a href="#">test 1</a></li>
    <li><a href="#">test 2</a></li>
  </ul>
</div>

＆＃13;

Answer 3

这是一个自以为是的答案，而不是你所要求的，但可能会更好。评论你是否想要改变任何事情。

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #333399;
}

#mainmenu {
  background-color: #BAB3D6;
}

#mainmenu ul {
  margin: 0px;
  padding: 0px;
  vertical-align: top;
  list-style: none;
  text-align: right;
}

#mainmenu li {
  text-align: center;
  height: 100%;
  display: inline-block;
}

#mainmenu li a {
  text-decoration: none;
  display: block;
  padding: 0.25em 20px;
}

#mainmenu li a:hover {
  background-color: #652D91;
  color: #FFFFFF;
}

<div id="mainmenu">
  <ul>
    <li><a href="#">test</a></li>
    <li><a href="#">test 1</a></li>
    <li><a href="#">test 2</a></li>
  </ul>
</div>

a：悬停与div高度不匹配

3 个答案: