How can I get this menu to hug the top of the page, widen out, and provide some space below it?

Question

I've got a menu above an HMTLTable that looks like this:

The menu HTML and CSS can be seen and fiddled with here.

It is based on the code provided by Tom in answer to somebody else's question here.

I want the menu bar to:

0) Hug the top of the page

1) Be as wide as the HTMLTable below it (whose three columns are given widths of 12%, 24%, and 62%)

2) Provide some "negative space" between it and the HTML table vertically, instead of sitting right on top of it.

I tried to take care of point 2 with this:

.top-level-menu {
    list-style: none;
    padding: 0;
    /*margin: 0;*/
    margin-bottom: 12px;
    width: 100%;
}

(commenting out margin 0 and adding a margin-bottom value)

...but it did nothing.

I don't see any "width" values in the CSS other than for the menu items. So how is the width of the menu bar controlled?

Here is my current HTML, derived from Tom's example:

<ul class="top-level-menu">
    <li> <a href="#">Schedules</a>
        <ul class="second-level-menu">
            <li><a href="#">Open Existing</a>
            </li>
            <li> <a href="#">Create New =></a>
                <ul class="third-level-menu">
                    <li><a href="#">Based on Existing</a>
                    </li>
                    <li><a href="#">From Scratch</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Save Current</a>
            </li>
            <li><a href="#">Email Current</a>
            </li>
            <li><a href="#">Print Current</a>
            </li>
        </ul>
    </li>
    <li><a href="#">Job/Locations</a>
        <ul class="second-level-menu">
            <li><a href="#">View or Edit</a></li>
            <li><a href="#">Add New</a></li>
        </ul>
    </li>
    <li><a href="#">Workers</a>
        <ul class="second-level-menu">
            <li><a href="#">View or Edit</a></li>
            <li><a href="#">Add New</a></li>
            <li><a href="#">Preferences</a></li>
        </ul>
    </li>
    <li><a href="#">Rules</a>
        <ul class="second-level-menu">
            <li><a href="#">Establish/Maintain</a></li>
        </ul>
    </li>
    <li><a href="#">Help</a>
        <ul class="second-level-menu">
            <li><a href="#">About</a></li>
            <li><a href="#">How To...</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Acquire License</a></li>
        </ul>
    </li>
</ul>

...and here is my current CSS, almost identical to Tom's:

.third-level-menu {
    position: absolute;
    top: 0;
    right: -150px;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}
.third-level-menu > li {
    height: 30px;
    background: #999999;
}
.third-level-menu > li:hover {
    background: #CCCCCC;
}
.second-level-menu {
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}
.second-level-menu > li {
    position: relative;
    height: 30px;
    background: navy;
}
.second-level-menu > li:hover {
    background: #CCCCCC;
}
.top-level-menu {
    list-style: none;
    padding: 0;
    /*margin: 0;*/
    margin-bottom: 12px;
    width: 100%;
}
.top-level-menu > li {
    position: relative;
    float: left;
    height: 30px;
    width: 150px;
    background: black;
}
.top-level-menu > li:hover {
    background: #CCCCCC;
}
.top-level-menu li:hover > ul {
    /* On hover, display the next level's menu */
    display: inline;
}
/* Menu Link Styles */
.top-level-menu a
/* Apply to all links inside the multi-level menu */
{
    font: bold 16px Candara, Calibri, 'Segoe UI', serif;
    color: #FFFFFF;
    text-decoration: none;
    padding: 0 0 0 10px;
    /* Make the link cover the entire list item-container */
    display: block;
    line-height: 30px;
    margin-bottom: 12px;
}
.top-level-menu a:hover {
    color: #000000;
}

So how can I push the menu up to the top, add a "force field" around the bottom of it so it can retain some "personal space," and stretch it out to cover the width of the table, or even the entire visible area of the page?

score 2 · Accepted Answer · edited Sep 03 '15 at 22:36

If I understood it right:

.top-level-menu {
   ...
   position: absolute;
   top: 0;
   width: 100%;
   ...
}

Menu wrapper .top-level-menu is 100% wide but you need to correct the .top-level-menu > li width:
```
.top-level-menu > li {
 ...
 width: 20%;
 ...
}
```
You won't be able to set margin-bottom for absolutely positioned element (since it's out of the normal element flow and it's size is ignored) – so you need to set margin-top for the table or add padding-top for the body element.

How can I get this menu to hug the top of the page, widen out, and provide some space below it?

1 Answers1