如何使用js使下拉菜单的宽度等于父div

Question

I have a CSS and HTML drop-down menu and I want to keep the width of my sub menus equal to their parent. I tried several ways but nothing works for me. If its possible to do it whether with CSS or with JS its fine for me here is my code

HTML

<nav>
    <ul class="navi_main">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a>
            <ul class="sub_navi_main">
                <li><a href="#">Page 1</a></li>
                <li><a href="#">Page 2</a></li>
            </ul>
        </li>
        <li><a href="#">Products</a>
            <ul class="sub_navi_main">
                <li><a href="#">Prod 1</a></li>
                <li><a href="#">Prod 2</a></li>
            </ul>                        
                        </li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</nav>

CSS

.navi_main{
    display:block;
}

.navi_main li{
    display: table-cell;
    z-index: 100;
}

.navi_main li:first-child{
margin-left:0;
}

.navi_main li a {
    text-decoration: none;
    display: block;
    font-size: 16px;
    color: #8098b1;
    padding: 0 14px;
    height: 64px;
    line-height: 64px;
    border-right: 1px solid #e6e6e6;
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    text-shadow: 0 1px 1px rgba(255,255,255,.64);
    text-transform: uppercase;
    position: relative;
}

.navi_main li a:hover, .navi_main li:hover > a{
    color:#ffffff;
    background:#9CA3DA;
}


.navi_main ul {
    display: none;
    margin: 0;
    padding: 0;
    width: 100%;
    position:relative;
    background: #ffffff;
    z-index:999999;
}

.navi_main ul li {
    display:block;
    float: none;
    background:none;
    margin:0;
    padding:0;
}
.navi_main ul li a {
    font-size: 14px;
    font-weight: normal;
    display: block;
    color: #797979;
    border-left: 3px solid #ffffff;
    background: #ffffff;
    height:40px;
    line-height:40px;
}

.navi_main ul li a:hover, .navi_main ul li:hover > a{
    background:#f0f0f0;
    border-left:3px solid #9CA3DA;
    color:#797979;
}

.navi_main li > ul.visible{
    display: block;
    position:absolute;
}
.navi_main ul ul {
    left: 149px;
    top: 0px;
}

Answer 1

OK...I've simplified the CSS a little as you had some reduntant rules in there and made the CSS selectors somewhat more specific and I think this is what you are looking for.

Note: If you want multiline text you really can't set a line-height equal to the height . I took all the height statements and let the link sizing (with padding) determine the actual heigts.

I've made one of the sub-menus visible so you don't have to hover to see it.

 * { box-sizing: border-box; } ul { list-style-type: none; margin: 0; padding: 0; } a { text-decoration: none; } .navi_main { /* display: block;*/ /* not required */ } .navi_main > li { display: table-cell; position: relative; /* positioning context */ } .navi_main > li > a { text-decoration: none; display: block; font-size: 16px; color: #8098b1; padding: 16px; border-right: 1px solid #e6e6e6; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; text-shadow: 0 1px 1px rgba(255, 255, 255, .64); text-transform: uppercase; } .navi_main li a:hover, .navi_main li:hover > a { color: #ffffff; background: #9CA3DA; } .navi_main li > ul { position: absolute; top: 100%; left: 0; display: none; width: 100%; background: #ff0000; } .navi_main li:hover > ul { display:block; } .navi_main ul > li { display: block; background: #bada55; } .navi_main ul > li > a { font-size: 14px; font-weight: normal; display: block; color: #797979; background: #ffffff; padding:8px 16px; border-left:2px solid white; } .navi_main ul li a:hover { background: #f0f0f0; color: #797979; border-left:2px solid #9CA3DA; } .navi_main li > ul.visible { display: block; } 

 <nav> <ul class="navi_main"> <li><a href="#">Home</a></li> <li><a href="#">About</a> <ul class="sub_navi_main"> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> </ul> </li> <li><a href="#">Products</a> <ul class="sub_navi_main visible"> <li><a href="#">Lorem ipsum dolor sit amet.</a></li> <li><a href="#">Prod 2</a></li> </ul> </li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav> 

Codepen Demo