CODEWITHSUNDEEP
cssnavigation
Oliver
Oliver

Reputation: 13

Dropdown submenu same width as main menu bar

I'm new to CSS, and if I'm honest don't really know what I'm doing. For a while now I've been trying to make the child page on the dropdown menu to be at least the same width as the parent page.

After hours of being frustrated that nothing I find on google works, I figured that I should ask someone who actually knows what they're doing. This is the (awful) code:

.menu li > a:after {
    color: #fff;
    content: ' ▼';
}

.menu li > a:only-child:after {
    content: '';
}



#main-nav {
    background-color: #6699FF;
    height: 40px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    text-align: center;
    display: block;
    float: left;
    width: 100%;
}

#main-nav li {
    position: relative;
}

#main-nav ul {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    position: relative;
    list-style: none;
    display: block;
}

#main-nav ul li {
    float: left;
    display: block;
    position: relative;
}

#main-nav ul li a {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    display: inline;
}


#main-nav a:link, #main-nav a:visited {
    color: #FFF;
    display: block;
    padding: 10px 25px;
    height: 20px;
}



/*Sub menus */


#main-nav {
    overflow: visible;
}

#main-nav ul {
    right: 0;
}

#main-nav ul li ul.sub-menu {
    position:absolute;
    display:none;
    margin: 0;
    padding: 0!Important;
    float: none;
}

#main-nav ul li:hover ul.sub-menu {
    display:block!important;
    float: none;
    white-space: nowrap;

}

#main-nav ul li ul.sub-menu li {
    background: #6699FF;
    text-align: left;
    -webkit-transition: height 0.3s ease-in;
            -moz-transition: height 0.3s ease-in;
            -o-transition: height 0.3s ease-in;
            -ms-transition: height 0.3s ease-in;
            transition: height 0.3s ease-in;
    width: auto;
    left:0;
}
#main-nav ul li ul.sub-menu li a {
    width: auto;
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
}

This is what it looks like when I hover over the parent 'meep' page: https://i.sstatic.net/djiiY.png

I would like it to be the same width, starting from the left so that any excess width due to a long page name would go to the right.

I've tried changing the display type and widths, nothing yet :(

I'd greatly appreciate any help! Thanks in advance

and sorry for the terrible code

JSfiddle: http://jsfiddle.net/q5381Ly5/1/

Upvotes: 0

Views: 1730

Answers (2)

Benjamin
Benjamin

Reputation: 2670

Instead of having width auto to your submenu do change it to 100%

Upvotes: 0

aahhaa
aahhaa

Reputation: 2275

I only change these two, add width 100%, it will get the whole width of the parent.

here is a demo http://jsfiddle.net/q5381Ly5/4/

    #main-nav ul li:hover ul.sub-menu {
        display:block!important;
        float: none;
        white-space: nowrap;
        width:100%;
    }

    #main-nav ul li ul.sub-menu li {
        width:100%;
        background: #6699FF;
        text-align: left;
        -webkit-transition: height 0.3s ease-in;
                -moz-transition: height 0.3s ease-in;
                -o-transition: height 0.3s ease-in;
                -ms-transition: height 0.3s ease-in;
                transition: height 0.3s ease-in;
        left:0;
    }

Upvotes: 1

Related Questions