激活下拉菜单时出现空白答案

【问题标题】：Black space when I activate drop down menu激活下拉菜单时出现空白
【发布时间】：2015-10-26 03:19:48
【问题描述】：

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

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/

【问题讨论】：

抱歉，完全忘记了
li 标签被设置为只有 60% 的宽度，因为您在链接旁边显示的 ul 元素上有 background-color: black;。至少我认为你是这么想的。

标签： html css drop-down-menu

【解决方案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/

【讨论】：

工作，谢谢。我非常专注于尝试使其具有响应性，以至于我认为在某些情况下百分比不会是坏事。
绝对。您仍然可以使用百分比，但如果您这样做，您还必须应用 margin: 0 auto; 以使其居中。无论如何，如果这提供了一个合理的答案，请选中答案旁边的绿色复选框以将其标记为已接受。