change the state of one element on hover css

Question

I would like to change the border of the menu links to zero when the dropdown menu is visible. I thought it would be simple but I couldn't figure it out.

Simply when .nav > li > div is visible make the borders of .nav > li > a zero. I tried:

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

But id doesn't work Can someone help me please, I need a quick help?

    /* 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

Try this:

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

Here is the fiddle

Answer 2

Add an :hover on the li element and make the border of a element 0px :

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

JsFiddle