Question

我正在使用标准下拉导航栏的网站，第一个按钮有一个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>

非常感谢您提前寻求帮助，

马盖特

Answer 1

最好的事情是不要让它成为主播标签。但是，如果必须，请添加以下样式：

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

或者在第一个链接中添加一个类并以这种方式设置样式。那会更好。

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

Answer 2

如果您不希望它成为链接，那么就不要将其作为链接。更改为<li><span>Portfolio ▼</span>会维护您的功能，您可以使用ul#navmenu > li > span或ID或类来设置其样式。

jsFiddle

此外，请不要忘记考虑css specificity

Answer 3

更新

您可以在css中使用普通层次结构，例如将css应用于您可以执行的投资组合

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

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

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

您也可以使用

:not(:first-child)

为除第一个孩子以外的所有其他元素应用css，所以你可以

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

Answer 4

很简单。如果你使用锚标签。你必须自己重新定义风格

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

Answer 5

选中 fiddle

只有两件事要做 -

删除包含portfolio - 标签的锚标记。

更改以下内容

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

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

5 个答案: