html - 如何在 CSS 中设置菜单样式使其看起来像一个按钮

Question

我想将 joomla 3.x 菜单样式设置为看起来像一个按钮 - 它看起来像一个按钮，在悬停时改变颜色，事件元素显示正确但链接不能按我想要的方式工作 - 我必须指出将鼠标直接放在文本上以打开链接，我想指向按钮区域中的任意位置以打开链接....

我的页面代码如下所示:

<ul class="nav menu">
<li class="item-101 current active parent"><a href="/" >Item 1</a></li>
<li class="item-102 parent"><a href="/index.php/item2" >Item 2</a></li>
<li class="item-103 parent"><a href="/index.php/item3" >Item 3</a></li>
</ul>

我的 CSS 看起来像这样:

#menu /* layout main menu */
{
  clear:both;
  float:left;
  margin-top:1em;
  padding-bottom:1em;
  width:100%;
  background-color:gimgrey;
  background-image:url('/templates/swimming/images/logo.png');
  background-repeat:no-repeat;

}

ul.menu
{
   display: table;
   margin-left: auto;
   margin-right: 0em;
}

div#menu li /* horizontal menu layout */
{
  display: inline;
  padding: 0.7em 1em 0.7em 1em;
  border: 3px solid #FFFFFF;
  border-radius: 10px;
  margin-right:30px;
  background-color: #4180dd;
}

div#menu li a:hover /* link style on-mouse-over */
{
  color:#FFFFFF;
  text-transform: uppercase;
  text-decoration: none;

}

div#menu li:hover  /* button style on-mouse-over */
{
  padding: 0.7em 1em 0.7em 1em;
  border: 3px solid #FFFFFF;
  border-radius: 10px;
  background-color: #dd417f;
}

div#menu li a /* link style */
{
  color:#FFFFFF;
  font-size: 1em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
}

div#menu li.active a /* active menu item style */
{
  color:#FFFFFF;
  text-transform: uppercase;
  text-decoration: none;
}

div#menu li.active /* active menu button style */
{
  padding: 0.7em 1em 0.7em 1em;
  border: 3px solid #FFFFFF;
  border-radius: 10px;
  background-color: #dd417f;
}

如果没有 joomla，我会反之亦然 <a href><li></li></a>获得我需要的效果(作为链接整个 li 区域，而不仅仅是文本)。

我做错了什么？有什么建议吗？

谢谢，兹登卡

Answer 1

试试这个(DEMO):

<ul class="nav menu">
    <li class="item-101 current active parent"><a href="/">Item 1</a>
    </li>
    <li class="item-102 parent"><a href="/index.php/item2">Item 2</a>
    </li>
    <li class="item-103 parent"><a href="/index.php/item3">Item 3</a>
    </li>
</ul>

CSS

.menu
/* layout main menu */
 {
    clear:both;
    float:left;
    margin-top:1em;
    padding-bottom:1em;
    width:100%;
    background-color:gimgrey;
    background-image:url('/templates/swimming/images/logo.png');
    background-repeat:no-repeat;
}
ul.menu {
    display: table;
    margin-left: auto;
    margin-right: 0em;
}
.menu li
/* horizontal menu layout */
 {
    display: inline-block;
    border: 3px solid #FFFFFF;
    border-radius: 10px;
    margin-right:30px;
    background-color: #4180dd;
}
.menu li a:hover
/* link style on-mouse-over */
 {
    color:#FFFFFF;
    text-transform: uppercase;
    text-decoration: none;
}
.menu li:hover
/* button style on-mouse-over */
 {
    border: 3px solid #FFFFFF;
    border-radius: 10px;
    background-color: #dd417f;
}
.menu li a
/* link style */
 {
    color:#FFFFFF;
    font-size: 1em;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    padding: 0.7em 1em 0.7em 1em;
}
.menu li.active a
/* active menu item style */
 {
    color:#FFFFFF;
    text-transform: uppercase;
    text-decoration: none;
}
.menu li.active
/* active menu button style */
 {
    border: 3px solid #FFFFFF;
    border-radius: 10px;
    background-color: #dd417f;
}

我做了什么:

• 经常使用的类(class)
• 翻新 div#menu 寻找 ID 为“menu”的 div
• 将您的 li 更改为 inline-block 并删除了填充
• 将填充放在a标签上，这将使它们的“目标区域”更大