如何使此菜单变黑并删除下划线？答案

【问题标题】：How do I make this menu black and remove underline?如何使此菜单变黑并删除下划线？
【发布时间】：2013-07-09 03:01:26
【问题描述】：

我正在为一家未来的服装公司创建一个网站。我没有太多的编码经验，所以如果有点草率，请多多包涵。我只想要一条完整的黑线穿过页面并使水平菜单变黑并删除下划线。我该怎么做？

<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="280" height="81"> <li><a href="#">
    <li><a href="#">Men</a></li>
<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="30" height="81">  
         <li><a href="#">Women</a></li>
<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="30" height="81">
    <li><a href="#">Photography/Art</a></l

【问题讨论】：

在哪里划线？请不要发布只有几行相关的大块代码，您应该始终减少您的问题。在提出问题之前，您必须表现出尽职调查。您似乎没有尝试自己解决问题
如果那是一张图片，你不能只使用 CSS 来改变它。 CSS 用于样式化 HTML。

标签： html css styles

【解决方案1】：

为锚标签添加样式并将hr标签的宽度更改为100%。

    <!doctype html>
<html>
<head>

<STYLE>
<!--
 a:hover{color:#000000;}
-->
</STYLE>

<p>&nbsp;</p>
<img border="0" src="http://img812.imageshack.us/img812/2628/rf3h.png" alt="Vealed" width="280" height="81">

<!-- This hr tag needed a 100% width, not 60% -->
<HR COLOR="black" WIDTH="100%">
<p>&nbsp;</p>

<!--Added a style here and referenced it in the class atribute of the anchor tags in the global nav. -->
<style>

    .navLink {
    color: #000000;    
    text-decoration: none !important;}

ul
{
list-style-type:none;
font-size: xx-large;
font-family: helvetica neue;
font-weight: lighter;

margin:0;
padding:0;
}
li
{
display:inline;
}

</style>


</head>
<body>


<ul id="nav" >

<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="280" height="81"> <li><a href="#">
    <li>
        <!-- see the class attribute here -->
        <a href="#" class="navLink">Men</a>
        </li>
<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="30" height="81">  
         <li><a href="#" class="navLink">Women</a></li>
<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="30" height="81">
    <li><a href="#" class="navLink">Photography/Art</a></l



<p>&nbsp;</p>

<p>&nbsp;</p>
<p><p align="center"><img src='http://img547.imageshauuck.us/img547/3900/ehd.png' border='0'/></a><br>



  </ul>













</body>
</html>

【讨论】：

您应该解释您的更改，并尝试仅发布已更改且相关的代码段。解释为什么需要进行更改会更好。
我认为这几乎可行，不值得投反对票。如果您的答案集中在修复上，无需粘贴整个代码，不断添加噪音（不相关信息），您的回答会更受欢迎。这里有一些提示：使用!important 是为那些不了解 CSS 特殊性的人准备的
是的，非常感谢，我一直在寻找解决方案。
令人着迷的是，有人在发布我的答案后几秒钟内就对我投了反对票。
@patricksweeney：同意。移动速度太快了。我添加了一些内联 cmets。

【解决方案2】：

你需要简单的 CSS 来改变链接的外观

将以下 CSS 添加到您的代码中

a, a:active, a:hover, a:visited {
  color: black;
  text-decoration: none;
}

【讨论】：

【解决方案3】：

这就是你要找的吗？

<!doctype html>
<html>
<head>
<style>
body{
margin: 0px;
padding: 0px;
}
img{
border: 0px;
}
#logo {
margin: 20px 0px 0px 20px;
}
#nav {
text-align: center;
list-style-type:none;
font-size: 36px;
font-family: helvetica neue;
font-weight: lighter;
margin: auto;
padding:0;
background: #000;
}
#nav li {
margin: 0px 20px;
display: inline;
}
#nav li a {

padding: 10px;
text-decoration: none;
color: #fff;
}
#nav li:hover{
background: #555;
}
</style>

</head>
<body>
<div id="logo">
<img src="http://img812.imageshack.us/img812/2628/rf3h.png" alt="Vealed Logo">
<hr align="left" color="yellow" style="height: 4px;" width="90%">
</div>
<ul id="nav">
<li><a href="#">Men</a></li>
<li><a href="#">Women</a></li>
<li><a href="#">Photography/Art</a></li>
</ul>
</body>
</html>

【讨论】：