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

Question

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

请协助，这不是普通菜单，而是用于将菜单放置在 div block 中的自定义短代码。

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

我已经尝试使用 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 简单地删除默认元素符号，并在 li 上添加带有伪元素 before 的自定义元素符号。 (您可以使用下面示例中的 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>