1

ドロップダウン メニューが表示されているときに、メニュー リンクの境界線をゼロに変更したいと思います。簡単だと思ったのですが、わかりませんでした。

が表示されている場合.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>

4

2 に答える 2

1

これを試して：

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

ここにフィドルがあります

于 2013-10-26T08:07:42.130 に答える
0

li要素に: hoverを追加し、要素の境界線を0pxにします。

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

Jsフィドル

于 2013-10-26T07:37:38.863 に答える