Question

我的菜单中的背景颜色显示在“块”中，而我的菜单项有圆角。我如何包含细胞的颜色？另外，我想在每个项目之间创建空间。谢谢。

P.S。背景颜色只是红色，以更好地展示我的问题。

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>的{{1}}。此外，您可以向<ul>元素添加填充以在它们之间创建间距。所以：

<li>

这里有JSFiddle来演示。希望这可以帮助！如果您有任何问题，请告诉我。

编辑：顺便说一下，如果您想知道为什么我在CSS中使用子选择器（.hovermenu > ul > li{ padding:0 20px; /* Adds space to either side of items */ } .hovermenu ul li a { background-color:red; /* Moved from .hovermenu ul */ }）来应用填充，这是为了防止从级联到子菜单项的样式也是如此。（否则，他们也会被他们自己的填充转移，这可能并不合适。）

Answer 2

具有边缘半径属性以将其四舍五入

Fiddle

代码段：

.hovermenu ul {
 z-index: 5;
 font: bold 20px Tahoma;
 padding-left: 0;
 margin-left: 0;
 display:inline-block;
 background-color:red;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px; /* future proofing */
 -khtml-border-radius: 10px; /* for old Konqueror browsers */;
 }

要有间距添加边距：

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

UPDATED FIDDLE WITH BOTH SPACING AND ROUND CORNERS

Answer 3

如果您想为导航项设置不同的颜色，这意味着如果您想使导航按钮的颜色与div的红色不同，那么您将添加.hovermenu ul li a类的背景颜色

但我猜测你想让你想要在实际导航项目中包含颜色而不是整个div（从背景中移除红色并将其保留在导航按钮中）。这是真的吗？

要执行此操作，您需要增加边距并将背景颜色放在.hovermenu ul li a类中：

.hovermenu ul li a {
 display: block;
 text-decoration: none;
 color: black;
 border: 2px solid #000000;
 padding: 3px 0.5em;
 border-radius: 10px;
 background-color:red; 
 margin: 0 5px 0 5px;
 }

您还需要从.hovermenu ul类中获取背景色。

.hovermenu ul {
z-index: 5;
font: bold 20px Tahoma;
padding-left: 0;
margin-left: 0;
display:inline-block;

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */;
}

http://jsfiddle.net/xr9XB/7/

在导航菜单中包含单个单元格的背景颜色

3 个答案: