html - 包含导航菜单中各个单元格的背景颜色

Question

我的菜单中的背景颜色显示为“ block 状”，而我的菜单项具有圆 Angular 。我如何包含单元格的颜色？我还想在每个元素之间留出空间。谢谢。

JsFiddle

附言背景颜色仅为红色以更好地展示我的问题。

CSS

/*MAIN MENU*/
.hovermenu ul {
 z-index: 5;
 font: bold 20px Tahoma;
 padding-left: 0;
 margin-left: 0;
 display:inline-block;
 background-color:red;
 }

.hovermenu ul li {
  display: block;
  position: relative;
  float: left;
  margin: 0;         
  padding: 0; 

 }
.hovermenu li ul { display: none; }
.hovermenu ul li a {
  display: block;
  text-decoration: none;
  color: black;
  border: 2px solid #000000;
  padding: 3px 0.5em;
  border-radius: 10px;
  }
.hovermenu ul li a:hover 
{
background-color:#fdff30;
border-style: outset; 
 }
.hovermenu li:hover ul {
  display: block;
  position: absolute;
}
.hovermenu li:hover li {
  float: none;
  font-size: 20px;
}
.hovermenu li:hover a { background: #eaeaeb; }
.hovermenu li:hover li a:hover { background: #fdff30; }
html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}

Answer 1

要在菜单项的圆边内包含红色背景色，请将样式移动到 <a>来自 <ul> .此外，您可以将填充添加到 <li>元素以在它们之间创建间距。所以:

.hovermenu > ul > li{
    padding:0 20px; /* Adds space to either side of items */
}
.hovermenu ul li a {
    background-color:red; /* Moved from .hovermenu ul */
}

这是一个 JSFiddle展示。希望这可以帮助!如果您有任何问题，请告诉我。

编辑:顺便说一下，以防万一你想知道为什么我在 CSS 中使用子选择器 ( > ) 来应用填充，这是为了防止样式级联也包括您的子菜单项。 (否则，它们也会被自己的填充移动，这可能是不可取的。)