Question

我想删除下划线并将自己的自定义项目符号添加到列表中。

请帮忙，也不是这不是普通菜单，而是用于将菜单放在div块中的自定义短代码。

网站为http://brainstormmarketing.agency/dev/UBG/print-and-document-division/，当用户将鼠标悬停在彩色块上时，会出现菜单。

我尝试使用css类和id删除样式，并尝试使用此代码：

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

Answer 1

菜单只是一个简单的无序列表（ul）。您只需使用list-style:none删除默认项目符号，然后在before上添加包含伪元素li的自定义项目符号。（您可以使用下面示例中的fontAwesome图标，或自定义图像，其他图标等。）

对于下划线，只需删除链接上的text-decoration即可。

记住编写特定路径，例如body #content ul.menu li a或更具体的路径，以覆盖默认样式

请参阅下面的代码段

ul.menu {
  list-style: none;
  padding-left: 0
}

ul.menu li:before {
  font-family: 'FontAwesome';
  content: "\f18e";
  padding: 0 5px 0 15px;
}

ul.menu li a {
  text-decoration: none;
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet">

<ul id="menu-software-and-integration" class="menu">
  <li id="menu-item-1853" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1853"><a href="http://brainstormmarketing.agency/dev/UBG/print-and-document-division/software-and-integration/print-management/" itemprop="url">Print Management</a></li>
  <li id="menu-item-1854" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1854"><a href="http://brainstormmarketing.agency/dev/UBG/print-and-document-division/software-and-integration/fleet-management/" itemprop="url">Fleet Management</a></li>
  <li id="menu-item-1855" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1855"><a href="http://brainstormmarketing.agency/dev/UBG/print-and-document-division/software-and-integration/document-workflow/" itemprop="url">Document Workflow</a></li>
  <li id="menu-item-1856" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1856"><a href="http://brainstormmarketing.agency/dev/UBG/print-and-document-division/software-and-integration/document-management/" itemprop="url">Document Management</a></li>
  <li id="menu-item-1857" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1857"><a href="http://brainstormmarketing.agency/dev/UBG/print-and-document-division/software-and-integration/electronic-archival/" itemprop="url">Electronic Archival</a></li>
  <li id="menu-item-1858" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1858"><a href="http://brainstormmarketing.agency/dev/UBG/cloud-integration/" itemprop="url">Cloud Integration</a></li>
  <li id="menu-item-1859" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1859"><a href="http://brainstormmarketing.agency/dev/UBG/print-and-document-division/software-and-integration/mobile-print/" itemprop="url">Mobile Print</a></li>
</ul>

从Wordpress自定义菜单中删除顽固的默认样式

1 个答案: