如何使用CSS样式将菜单样式设置为按钮样式

Question

如何使用CSS样式将菜单样式设置为按钮样式

3

我希望将 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 区域而不仅仅是文本）。

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

谢谢， Zdenka

- Zdenka

尝试使用 div#menu li a { display: block; }，因为您当前正在使用 inline-block。 - Lodder

将视觉样式（填充、背景颜色、边框等）应用于<a>标签而不是<li>标签，但保留display:inline和margin不变。 - user1864610

1

首先，您对li应用了填充-这意味着其中的a当然不会占据所有空间。改为将填充应用于a。其次，您的CSS高度冗余-您不断重复属性，如填充、边框和边框半径，用于项目的不同“状态”，这是不必要的... - CBroe

请记住，{{link1：<li> </ li>}}不是有效的HTML。 - Jon P

你的CSS也很混乱，你把类.menu和ID#menu混在一起了。 - Jon P

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jon P · Accepted Answer

试试这个(演示)：

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

我所做的:

一致使用类
删除了寻找ID为“menu”的div的div#menu
将您的li更改为inline-block并删除填充
将填充放置在a标签上，这将使它们的“目标区域”更大