更改懸停時的一個元素的狀態css

Question

當下拉菜單可見時，我想將菜單鏈接的邊框更改爲零。我認爲這很簡單，但我無法弄清楚。

只要當.nav > li > div可見時，使.nav > li > a的邊界爲零。我嘗試過：

.nav > li > div:hover > .nav > li > a{border:0} 

但是id不起作用有人可以幫我，請幫忙嗎？

/* Menu Links */ 
     .nav > li > a { 
    position: relative; 
    display: block; 
    z-index: 510; 
    height: 30px; 
    padding: 0 20px; 
    line-height: 30px; 
    width:110px; 
    font-family: Helvetica, Arial, sans-serif; 
    font-size: 13px; 
    border-top:1px solid #e5e5e5; 
    border-bottom:1px solid #e5e5e5; 
    border-left:1px solid #e5e5e5; 
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease; 
    -o-transition: all .3s ease; 
    -ms-transition: all .3s ease; 
    transition: all .3s ease; 
    text-align:center; 
    color:black; 

    } 

    /* Menu Dropdown */ 
    .nav > li > div { 
    position: absolute; 
    display: block; 
    width: 100%; 
    top: 30px; 
    left: 0; 
    opacity: 0; 
    visibility: hidden; 
    overflow: hidden; 
    background: #ffffff; 
    border-left:1px solid #e5e5e5; 
    border-right:1px solid #e5e5e5; 
    border-bottom:1px solid #e5e5e5; 
    -webkit-box-shadow: 0 2px 2px rgba(50,50,50,0.1); 
    -moz-box-shadow: 0 2px 2px rgba(50,50,50,0.1); 
    box-shadow: 0 2px 2px rgba(50,50,50,0.1); 
    -o-transition: all .3s ease .15s; 
    -ms-transition: all .3s ease .15s; 
    transition: all .3s ease .15s; 
    } 

    .nav > li:hover > div { 
    opacity: 1; 
    visibility: visible; 
    overflow: visible; 
    } 

HTML

<div id="menu-wrapper"> 

<ul class="nav"> 
    <li> 
     <a href="#">ONE</a> 
     <div> 
      <div class="nav-column"> 
       <h3>Home</h3> 
       <ul> 
        <li><a href="#">Pampers Diapers</a></li> 
        <li><a href="#">Huggies Diapers</a></li> 
        <li><a href="#">Seventh Generation</a></li> 
        <li><a href="#">Diapers</a></li> 
        <li><a href="#">Derbies</a></li> 
        <li><a href="#">Driving shoes</a></li> 
        <li><a href="#">Espadrilles</a></li> 
        <li><a href="#">Loafers</a></li> 
       </ul> 
      </div> 

      <div class="nav-column"> 
       <h3>Home</h3> 
       <ul> 
        <li><a href="#">Driving shoes</a></li> 
        <li><a href="#">Espadrilles</a></li> 
        <li><a href="#">Loafers</a></li> 
       </ul> 

       <h3>Home</h3> 
       <ul> 
        <li><a href="#">Driving shoes</a></li> 
        <li><a href="#">Espadrilles</a></li> 
        <li><a href="#">Loafers</a></li> 
       </ul> 
      </div> 

      <div class="nav-column"> 
       <h3>Home</h3> 
       <ul> 
        <li><a href="#">Pampers Diapers</a></li> 
        <li><a href="#">Huggies Diapers</a></li> 
        <li><a href="#">Seventh Generation</a></li> 
        <li><a href="#">Diapers</a></li> 
        <li><a href="#">Derbies</a></li> 
        <li><a href="#">Driving shoes</a></li> 
        <li><a href="#">Espadrilles</a></li> 
        <li><a href="#">Loafers</a></li> 
       </ul> 
      </div> 

      <div class="nav-column"> 
       <h3 class="orange">Related Categories</h3> 
       <ul> 
        <li><a href="#">Pampers Diapers</a></li> 
        <li><a href="#">Huggies Diapers</a></li> 
        <li><a href="#">Diapers</a></li> 
       </ul> 

       <h3 class="orange">Brands</h3> 
       <ul> 
        <li><a href="#">Driving shoes</a></li> 
        <li><a href="#">Espadrilles</a></li> 
       </ul> 
      </div> 
     </div> 
    </li> 
    <li><a href="#">2</a></li> 
    <li> 
     <a href="#">Furnitures</a> 
     <div> 
      <div class="nav-column"> 
       <h3 class="orange">Related Categories</h3> 
       <ul> 
        <li><a href="#">Pampers Diapers</a></li> 
        <li><a href="#">Huggies Diapers</a></li> 
        <li><a href="#">Diapers</a></li> 
       </ul> 

       <h3 class="orange">Brands</h3> 
       <ul> 
        <li><a href="#">Driving shoes</a></li> 
        <li><a href="#">Espadrilles</a></li> 
       </ul> 
      </div> 

      <div class="nav-column"> 
       <h3>Home</h3> 
       <ul> 
        <li><a href="#">Pampers Diapers</a></li> 
        <li><a href="#">Huggies Diapers</a></li> 
        <li><a href="#">Seventh Generation</a></li> 
        <li><a href="#">Diapers</a></li> 
        <li><a href="#">Derbies</a></li> 
        <li><a href="#">Driving shoes</a></li> 
        <li><a href="#">Espadrilles</a></li> 
        <li><a href="#">Loafers</a></li> 
       </ul> 
      </div> 

      <div class="nav-column"> 
       <h3>Home</h3> 
       <ul> 
        <li><a href="#">Driving shoes</a></li> 
        <li><a href="#">Espadrilles</a></li> 
        <li><a href="#">Loafers</a></li> 
       </ul> 

       <h3>Home</h3> 
       <ul> 
        <li><a href="#">Driving shoes</a></li> 
        <li><a href="#">Espadrilles</a></li> 
        <li><a href="#">Loafers</a></li> 
       </ul> 
      </div> 

      <div class="nav-column"> 
       <h3>Home</h3> 
       <ul> 
        <li><a href="#">Pampers Diapers</a></li> 
        <li><a href="#">Huggies Diapers</a></li> 
        <li><a href="#">Seventh Generation</a></li> 
        <li><a href="#">Diapers</a></li> 
        <li><a href="#">Derbies</a></li> 
        <li><a href="#">Driving shoes</a></li> 
        <li><a href="#">Espadrilles</a></li> 
        <li><a href="#">Loafers</a></li> 
       </ul> 
      </div> 
     </div> 
    </li> 
    <li><a href="#">3</a></li> 
    <li><a href="#">4</a></li> 
    <li><a href="#">5</a></li> 
    <li><a href="#">6</a></li> 
    <li><a href="#">7</a></li> 


</ul> 

Answer 1

添加：在李元素上懸停做出的邊境元素0像素：

.nav li:hover a{border:0px;} 

JsFiddle

Answer 2

試試這個：

.nav > li:hover > a{ 
    text-decoration:none; 
} 

Here is the fiddle