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;
}

我做了什么：

一直使用的课程
Renoved div#menu正在寻找ID为“menu”的div
将您的li添加到inline-block并删除了填充
将填充放在a标签上，这会使他们的“目标区域”更大

如何在CSS中将菜单样式设置为按钮

1 个答案: