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

试试这个：

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

Here is the fiddle

Answer 2

在 li 元素上添加：悬停，并使 a 元素的边框 0px ：

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

JsFiddle

在hover css上更改一个元素的状态

2 个答案: