html - 从 css 下拉菜单的顶部元素中删除链接和样式

Question

我在一个网站上工作，该网站有一个标准的下拉导航栏，第一个按钮有一个 CSS 下拉菜单。一切正常，但我想从下拉菜单顶部删除链接，因为它没有链接到任何东西，它只是用来下拉菜单。问题是它正在接受其他元素的样式。当元素悬停在光标上时，光标变为手指，字体改变颜色以指示链接。我也不希望它这样做，但在尝试了几种不同的方法后我无法解决它!

我尝试这样做是为了删除手指投资组合，但我认为这不正确？它也不会阻止文本改变颜色？

我做了一个 fiddle :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

检查这个 fiddle

只有两件事要做-

1. 删除包围 portfolio-tab 的 anchor 标记。

2. 更改以下内容

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