height and width not working with javascript

Question

I'm implementing an expanding menu with 2 links, but for some reason when I expand the menu the height and width properties of my menu items are not working.

Here is my HTML:

        function navigation() {
            document.getElementById('expandingMenu').style.display = "block";}

#navbutton{
    background-color: white;
    border-left: 0px solid black;
    border-top: 0px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    color: blue;
    padding: 10px 40px;
    }
.subMenu{
    background-color: blue;
    color: white;
    text-decoration: none;
    width: 120px;
    height: 40px;
    text-align: center;
    margin-left: 12px;
    margin-top: 5px;
    }
.hide{
    display: none;
    }

        <nav>
            <button onclick="navigation()" id="navbutton">Navigation</button>
            <div class="hide" id="expandingMenu" >
                <a class="subMenu" href="">-Home -</a>
                <a class="subMenu" href="">-Next -</a>
            </div>
        </nav>

Please define "not working" in more specific detail. What are you expecting, what is different etc — charlietfl, Dec 13 '20 at 19:53

score 1 · Answer 1 · answered Dec 13 '20 at 19:52

By default a elements are display: inline; which ignores the width and height CSS properties. You can fix this by adding display: block; to your .subMenu class. Fixed working example:

function navigation() {
    document.getElementById('expandingMenu').style.display = "block";
}

#navbutton {
    background-color: white;
    border-left: 0px solid black;
    border-top: 0px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    color: blue;
    padding: 10px 40px;
}

.subMenu {
    background-color: blue;
    color: white;
    text-decoration: none;
    width: 120px;
    height: 40px;
    text-align: center;
    margin-left: 12px;
    margin-top: 5px;
    display: block;
}

.hide {
    display: none;
}

<nav>
    <button onclick="navigation()" id="navbutton">Navigation</button>
    <div class="hide" id="expandingMenu" >
        <a class="subMenu" href="">-Home -</a>
        <a class="subMenu" href="">-Next -</a>
    </div>
</nav>

height and width not working with javascript

1 Answers1