Question

当我激活下拉菜单时（通过悬停），我的子菜单右侧有一些黑色空间。我已经尝试了很多东西，似乎无法找到我必须改变哪个元素来摆脱它。请帮帮我，当小提琴增加网站的宽度，问题变得更加明显。我根本不想要任何空间，我希望子菜单符合它丢弃的菜单的大小。

HTML：

<body>

    <header id = "M_head">
            <img id="M_logo" src="MircLogo.png">
            <img id="M_logo2" src="MircLogo.png">
            <h2><ul>Mc</ul></h2>    

    </header>
        <div id="container">

            <nav id="M_nav">
                <ul>
                    <li>NEWS
                        <ul>
                            <li><a>Item1</a></li><li><a>Item1</a></li><li><a>Item1</a></li><li><a>Item1</a></li>
                        </ul>
                    </li> 
                    <li>STORE
                        <ul>
                            <li><a>Item1</a></li><li><a>Item1</a></li><li><a>Item1</a></li><li><a>Item1</a></li>
                        </ul>
                    </li>    
                    <li>BLOG</li>   
                    <li>CONTACTS</li>  
                    <li>ABOUT</li>


                </ul>

            </nav>

            <section id="M_section">
            <div id=Side_sec></div>
            <div id="Side_sec2"></div>
            </section>

            <footer id="M_footer">

            </footer>
        </div>

    </body>

的CSS：

*{box-sizing:border-box;}

body{
    max-width:100%;
    margin:0px;
    display:block;

}


#container{
    padding:0;
    text-align:center;
    box-sizing:border-box;  
    margin: 0px auto;
    margin-top:-.5em;
    background-image:url("MircBackground.jpg");
    -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
    background-size: cover;
    background-repeat:no-repeat;


}
#M_logo{
    margin:-25px;
    float:left;
    height:5em;
    width:8%;
    margin-left:-1.825em;
}
#M_logo2{
    margin-top:-25px;
    float:right;
    height:5em;
    width:8%;
    margin-right:-1.825em;
}
#M_head{
    margin:0px auto;
    color:black;
    width:90%;
    background-color:white;
    height:4em; 
}

#M_head ul{
    padding:0px auto !important;
    margin: 0px;
    margin-left:5em;
    text-align:left;
    font-style:italic;
    font-weight:bold;
    width:30%;
    letter-spacing:-0.08em;
    word-spacing:-0.03em;
}




#M_nav ul {
    width:102.5%;
    padding:0px;
    padding-top:.25em; 
    padding-bottom:.25em;
    margin-left:-2.6%;
    margin-top:0em;
    background-color:black;
    display:inline-table;
}


#M_nav ul li{
    display:inline-block;
    list-style-type:none;
    text-decoration:none;
    text-align:center;
    padding-left:3.5em;
    padding-right:3.5em;
    padding-top:0.35em;
    padding-bottom:0.35em;
    display:inline-block;
    border-radius:0.25em;
    color:white;
    font-weight:bold;
    background-color:black;
}


#M_nav ul li:hover{
    background-color:#FFBF00;
    color:white;
    font-shadow:none;
    z-index:100;
}

#M_nav ul ul{ 
    display:none;
}

#M_nav ul li:hover >ul{
    display:block;
    width:20%;
    position:absolute;
    margin-top:.7em;
    float:center;
}
#M_nav ul li:hover ul >li{
    display:block;
        width:60%;
}

#Side_sec{
    height:50em;
    width:15%;
    border-left:2px solid white;
    float:right;
}

#M_section{
    height:50em;
    width:80%;
    margin:-1em auto;
    border:2px solid white;
}

小提琴链接：http://jsfiddle.net/ft9b6np9/

Answer 1

变化：

#M_nav ul li:hover ul >li{
    display:block;
    width:60%;
}

为：

#M_nav ul li:hover ul >li{
    display:block;
}

设置百分比宽度会导致右侧出现黑色溢出。

小提琴：http://jsfiddle.net/ft9b6np9/1/

激活下拉菜单时的黑色空间

1 个答案: