CODEWITHSUNDEEP
htmlcss
Barnold
Barnold

Reputation: 130

How do I fill the remaining space on my menu with a background colour?

I haven't done CSS in a while and I'm just trying to create a very simple navigation menu but I am getting stuck. I think I may be over complicating things.

Here is an image of what I have:

enter image description here

Please note that I haven't done the javascript yet so it is just static at the moment.

The idea is that the user will hover over Departments, then the sub menu will appear as a rectangle. My problem is that most of the department names only have 1 or 2 items underneath them, so when the other departments appear below it leaves a white space. I want this to be coloured in.

I have tried lots of different approaches but I cannot seem to get it right without everything else looking wrong.

CSS/HTML: 

#navigation {
    width: 75%;
}

#navigation ul{
    list-style-type: none;
    padding:0;
    margin:0;
    color: white;
}

.nav a {
    display: block;
    padding:10px;
    color:white;
    border:0;
    text-align:center;
}

#navigation ul > li {
    display:inline-block;
    float:left;
    width:12.5%;
    background-color: #244C5A;
}

#navigation ul > li > ul {
    width:400%;
    clear:both;
}

#navigation ul > li > ul > li  {
    width: 25%;
    display:block;
}

#navigation ul > li > ul > li > a  {
    padding:5px 0 5px 0;
}


#navigation ul > li > ul > li > ul > li{
    clear:both;
    font-size:10pt;
}

ul.lowerNav li {
    margin-top:10px;
}
        <div id="navigation">
            <ul class="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">AX Project</a></li>
                <li><a href="#">Communication</a></li>
                <li><a href="#">Information</a></li>
                <li><a href="#">Online Forms</a></li>
                <li><a href="#">Departments</a>
                    <ul>
                        <li><a href="#">Marketing</a>
                            <ul>
                                <li><a href="#">Our Press Releases</a></li>
                                <li><a href="#">Our Brochures</a></li>
                                <li><a href="#">Our Photography</a></li>
                                <li><a href="#">Our Adverts</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Health & Safety</a>
                            <ul>
                                <li><a href="#">COSHH Database</a></li>
                                <li><a href="#">Documents</a></li>
                            </ul>
                        </li>
                        <li><a href="#">IT</a>
                            <ul>
                                <li><a href="#">IT Manuals</a></li>
                                <li><a href="#">Useful IT Documents</a></li>
                                <li><a href="#">Tip of the Week</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Sales</a>
                            <ul>
                                <li><a href="#">Documents</a></li>
                            </ul>
                        </li>
                    </ul>
                    
                    <ul class="lowerNav">
                        <li><a href="#">Production</a></li>
                        <li><a href="#">Finance</a></li>
                        <li><a href="#">Human Resources</a></li>
                    </ul>
                </li>
                <li><a href="#">Reporting</a></li>
            </ul>
        </div>

As I mentioned, I think I am really over complicating things with my CSS but I am not sure how to make it more efficient. If anyone could give me any pointers it would be a massive help.

Thank you

Upvotes: 0

Views: 198

Answers (1)

Pawan Kumar
Pawan Kumar

Reputation: 1374

Added a css class .dropdownMenu, just check that

.dropdownMenu{
    background-color: #244C5A;
    height: 150px;
    overflow-y: scroll;
    overflow-x:hidden;
}

#navigation {
    width: 75%;
}

#navigation ul{
    list-style-type: none;
    padding:0;
    margin:0;
    color: white;
}

.nav a {
    display: block;
    padding:10px;
    color:white;
    border:0;
    text-align:center;
}

#navigation ul > li {
    display:inline-block;
    float:left;
    width:12.5%;
    background-color: #244C5A;
}

#navigation ul > li > ul {
    width:400%;
    clear:both;
}

#navigation ul > li > ul > li  {
    width: 25%;
    display:block;
}

#navigation ul > li > ul > li > a  {
    padding:5px 0 5px 0;
}


#navigation ul > li > ul > li > ul > li{
    clear:both;
    font-size:10pt;
}

ul.lowerNav li {
    margin-top:10px;
}
<div id="navigation">
            <ul class="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">AX Project</a></li>
                <li><a href="#">Communication</a></li>
                <li><a href="#">Information</a></li>
                <li><a href="#">Online Forms</a></li>
                <li><a href="#">Departments</a>
                    <ul class="dropdownMenu">
                        <li><a href="#">Marketing</a>
                            <ul>
                                <li><a href="#">Our Press Releases</a></li>
                                <li><a href="#">Our Brochures</a></li>
                                <li><a href="#">Our Photography</a></li>
                                <li><a href="#">Our Adverts</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Health & Safety</a>
                            <ul>
                                <li><a href="#">COSHH Database</a></li>
                                <li><a href="#">Documents</a></li>
                            </ul>
                        </li>
                        <li><a href="#">IT</a>
                            <ul>
                                <li><a href="#">IT Manuals</a></li>
                                <li><a href="#">Useful IT Documents</a></li>
                                <li><a href="#">Tip of the Week</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Sales</a>
                            <ul>
                                <li><a href="#">Documents</a></li>
                            </ul>
                        </li>
                    </ul>
                    
                    <ul class="lowerNav">
                        <li><a href="#">Production</a></li>
                        <li><a href="#">Finance</a></li>
                        <li><a href="#">Human Resources</a></li>
                    </ul>
                </li>
                <li><a href="#">Reporting</a></li>
            </ul>
        </div>

Upvotes: 2

Related Questions