文字修饰：无。不工作

Question

嗨，所以我想做一个导航菜单链接到其他网页点击。但是当我告诉它链接到某处时，我会得到这个丑陋的下划线和蓝色文本。我不想那样。我试过“文字装饰：没有;”我已经搜索了一下这个话题。但它没有帮助：/谢谢你的任何建议！

这里是我的html：

<div id="box"> 
    <div id="items"> 
     <div class="item">Item 1</div> 
     <div class="item">Item 2</div> 
     <div class="item">Item 3</div> 
     <div class="item">Contact</div> 
     <div class="item"><a href="#">Donate </a></div> 
     </div> 
    </div> 

    <div id="btn"> 
     <div id="top"></div> 
     <div id="middle"></div> 
     <div id="bottom"></div> 
    </div> 

这是CSS

#box { 
    position: fixed; 
    z-index: 4; 
    overflow: auto; 
    top: 0px; 
    left: -275px; 
    width: 275px; 
    opacity: 0; 
    padding: 20px 0px; 
    height: 100%; 
    background-color: #f6f6f6; 
    color: #343838; 
    -webkit-transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91); 
    transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91); 
} 

#box.active { 
    left: 0px; 
    opacity: 1; 
} 

#items { 
    position: relative; 
    top: 35%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
    text-decoration: none; 
} 

#items .item { 
    position: relative; 
    cursor: pointer; 
    font-size: 23px; 
    padding: 15px 30px; 
    -webkit-transition: all 250ms; 
    transition: all 250ms; 
} 

#items .item:hover { 
    padding: 15px 45px; 
    background-color: rgba(52, 56, 56, 0.2); 
} 

#btn { 
    position: fixed; 
    z-index: 5; 
    top: 15px; 
    left: 15px; 
    cursor: pointer; 
    -webkit-transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91); 
    transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91); 
} 

#btn div { 
    width: 35px; 
    height: 2px; 
    margin-bottom: 8px; 
    background-color: #F5F5F5; 
    -webkit-transition: -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms; 
    transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms; 
} 

#btn:hover > div { box-shadow: 0 0 1px #F5F5F5; } 

#btn.active { left: 230px; } 

#btn.active div { background-color: #343838; } 

#btn.active:hover > div { box-shadow: 0 0 1px #343838; } 

#btn.active #top { 
    -webkit-transform: translateY(10px) rotate(-135deg); 
    -ms-transform: translateY(10px) rotate(-135deg); 
    transform: translateY(10px) rotate(-135deg); 
} 

#btn.active #middle { 
    -webkit-transform: scale(0); 
    -ms-transform: scale(0); 
    transform: scale(0); 
} 

#btn.active #bottom { 
    -webkit-transform: translateY(-10px) rotate(-45deg); 
    -ms-transform: translateY(-10px) rotate(-45deg); 
    transform: translateY(-10px) rotate(-45deg); 
} 

Answer 1

你已经把你的手指上。 （默认）下划线适用于链接，而不是#items。这些是您需要重新设计的元素：

#items .item a{ 
    text-decoration: none; 
    color: inherit; 
} 

Answer 2

添加到a标签text-decoration

.items a{ 
    text-decoration: none; 
    color:#000; 
}