删除链接和样式从顶部项目的CSS下拉菜单

我正在一个网站上有一个标准的下拉导航栏与第一个按钮有一个CSS下拉菜单。一切工作正常，但我想删除从下拉菜单顶部的链接，因为它不链接到任何东西，它只是在那里放下菜单。问题是，它正在接受其他物品的造型。当项目在光标上方悬停时变成手指，并且字体会更改指示链接的颜色。我不希望它做，但尝试了几种不同的方式后，我无法解决它！删除链接和样式从顶部项目的CSS下拉菜单

我试图做到这一点，删除手指投资组合，但我不认为这是正确的？它也不会停止文本更改颜色？

我已经做了小提琴：enter link description here

#name {background-image: url("darren-morton.jpg"); width: 600px; height: 90px;  position: absolute; top: 0px; left: 150px;} 
    /*Navigation Bar Menu */ 
    #NavBar{position: relative; top: 70px; left: 288px; width: 645px; height: 30px; z-index: 20;} 
    ul#navmenu, ul.sub1 {list-style-type: none; font-size: 14px;} 
    ul#navmenu li {width: 80px; text-align: center; position: relative; float: left;} 
    ul#navmenu a {text-decoration: none; display: block; width: 80px; height: 25px;  line-height: 25px; background-color: #FFF; border: 1px solid #000000;} 
    ul#navmenu li:hover > a {text-decoration: none;} 
    ul#navmenu li:hover a:hover {text-decoration: none;} 
    ul#navmenu ul.sub1 {display: none; position: absolute; top: 26px; left: 0} 
    ul#navmenu li:hover .sub1 {display: block;} 
    ul#navmenu .sub1 li:hover {display: block;} 
.downarrow {font-size: 11px; position: absolute; top: 1px; right: 2px;} 

a:link {color: black; text-decoration: none;} 
a:hover {color: #c6000f; text-decoration: underline;} 
a:active {color: black; text-decoration: none;} 


<div id="NavBar"> 
<ul id="navmenu"> 
    <li><a href="#">Portfolio</a><span class="downarrow">&#9660;</span> 
     <ul class="sub1"> 
      <li><a href="travel-landscape-photography.html">Landscape</a></li> 
      <li><a href="travel-portrait-photography.html">Portrait</a></li> 
      <li><a href="images-of-sadness.html">Sadness</a></li> 
      <li><a href="black-and-white-travel-photography.html">Other</a></li> 
     </ul> 
    </li> 
    <li class="test"><a href="about-darren-morton.html">About</a></li> 
    <li class="test"><a href="top-travel-photography-tips.html">101</a></li> 
    <li class="test"><a href="contact-darren-morton.html">Contact</a></li> 
</ul> 
</div>

非常感谢您事先的任何帮助，

马盖特

来源

2013-12-22 Margate

检查并重新定义样式这个fiddle

只有两件事情是要私下作出─

取下锚标记包围portfolio -Tab。

更改以下

ul#navmenu a {text-decoration: none; display: block; width: 80px; height: 25px; line-height: 25px; background-color: #FFF; border: 1px solid #000000;}

要

ul#navmenu li {text-decoration: none; display: block; width: 80px; height: 25px; line-height: 25px; background-color: #FFF; border: 1px solid #000000;}

来源

2013-12-22 06:59:35

这正是我想要的！我也学会了，我不会仅仅复制代码并且说谢谢！我会研究它，看看我错在哪里以便从中学习。非常感谢你的时间，这真的有帮助。当我成为JQ时，我会回馈。马盖特：） – Margate

所有最好的。 –

最好的事情是不能使它一个锚标记。不过，如果你必须添加以下样式：

ul#navmenu li a:first-child { 
    cursor: normal; 
    text-decoration: none; 
    color: black; 
}

或添加类到第一个链接和风格这种方式。那会更好。

像这样：http://jsfiddle.net/yfqMv/1/

来源

2013-12-22 05:16:19 Leeish

你好Leeish，谢谢你的小提琴，我已经改变了锚标签卸下HREF＃，但如果这会我不知道是否导致问题？这里是你所做的更新的小提琴：http://jsfiddle.net/Margate/gYkWT/我只是想停止光标变成鼠标上的取景器... – Margate

非常感谢。我理解你解决这个问题的方式，我确实试图做这样的事情，但目前还不知道语法。 – Margate

如果你不希望它是一个链接，然后就是不让它的链接。更改为<li><span>Portfolio ▼</span>可以维护您的功能，您可以使用ul#navmenu > li > span或ID或类进行设计。

jsFiddle

另外，不要忘记采取css specificity考虑

来源

2013-12-22 05:18:26 Isius

链接非常好，正是我需要的。我知道我需要学习这样的东西，但不知道它叫什么，或者即使它有一个主题！你已经为我打了头。我会阅读书签页面以便学习并保留一个参考点。非常感谢：） – Margate

更新

您可以使用正常的层次结构中的CSS想申请的CSS投资组合中，你可以做

ul#navmenu > li:first-child > a { cursor: auto; color: black}

它ul#navmenu > li将选择所有第一个元素，即没有子菜单li元素，然后t选择第一个li添加first-child个只有顶层a元素做> a

检查这个小提琴http://jsfiddle.net/raunakkathuria/yfqMv/2/

您还可以使用

:not(:first-child)

申请的CSS除了第一个孩子的所有其他元素，所以你可以做

ul#navmenu li:not(:first-child)

来源

2013-12-22 05:19:30

非常感谢。这对我来说是一种帮助，我可以为此学习：） – Margate

简单。如果你使用锚标签。你必须通过自己的

ul#navmenu li:first-child a { 
    color: black; 
    cursor: default; 
    text-decoration: none; 
}

来源

2013-12-22 05:27:41 Kirk

删除链接和样式从顶部项目的CSS下拉菜单

回答

相关问题