0

I would like to have a long border underneath my menu UL, but the "border-bottom" property on the list items does not work well:

#headermenu {
    height: 40px;
    background: #f47a20;
    position: relative;
}
#headermenu .menu {
    background: #F47B20;
    float: left;
    border: 1px solid #D66C1C;
    padding: 0.6em 1em;
    margin-top: 0.5em;
    list-style-type: none;
}
#headermenu-left {
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    margin: 0;
}
#headermenu-left .menu {
    border-bottom: 4px solid #004B8D;
}
<body>
    <div id="headermenu">
        <ul id="headermenu-left">
            <li class="menu">
                <a href="#">Link 1</a>
            </li>
            <li class="menu">
                <a href="#">Link 2</a>
            </li>
            <li class="menu">
                <a href="#">Link 3</a>
            </li>
            <li class="menu">
                <a href="#">Link 4</a>
            </li>
            <li class="menu">
                <a href="#">Link 5</a>
            </li>
            <li class="menu">
                <a href="#">Link 6</a>
            </li>
        </ul>
    </div>
</body>

The border is interrupted at the corners by -I guess- the border-left and border-right properties not being there?

I can't put it on the <ul> element, because then the line runs too long.

3
  • Do you need the ul to be positioned absolutely for any reason other than to resolve this very problem?
    – matewka
    Oct 16, 2013 at 14:08
  • @matewka the reason is for the borders yes, maybe not the best way but it works for me now.. Is there another thing I can learn to be better?
    – Tominator
    Oct 16, 2013 at 14:17
  • I think that j08691's answer is the best. I wanted to post similiar one but he was first.
    – matewka
    Oct 16, 2013 at 14:19

3 Answers 3

5

You can put it on the UL if you get rid of the width on it. Remove your last rule and use this:

#headermenu {
    height: 40px;
    background: #f47a20;
    position: relative;
}
#headermenu .menu {
    background: #F47B20;
    float: left;
    border: 1px solid #D66C1C;
    padding: 0.6em 1em;
    margin-top: 0.5em;
    list-style-type: none;
}
#headermenu-left {
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    border-bottom: 4px solid #004B8D;
}
<body>
    <div id="headermenu">
        <ul id="headermenu-left">
            <li class="menu">
                <a href="#">Link 1</a>
            </li>
            <li class="menu">
                <a href="#">Link 2</a>
            </li>
            <li class="menu">
                <a href="#">Link 3</a>
            </li>
            <li class="menu">
                <a href="#">Link 4</a>
            </li>
            <li class="menu">
                <a href="#">Link 5</a>
            </li>
            <li class="menu">
                <a href="#">Link 6</a>
            </li>
        </ul>
    </div>
</body>

1
  • This does work, although I needed the width (in my real code) to put another menu (-right) next to it and more to the right side. However, I could fix that by making that one right: 10% instead of its original left: 70%; width: 30%;
    – Tominator
    Oct 16, 2013 at 14:21
3

The problem, as you suggest, is the missing left and right borders, which have a width, but no color, so this distorts the appearance of the bottom border with the illusion of a missing notch.

To solve this you can simply define border-width: 0 for the element, and allow the border-bottom property to override that setting.

#headermenu {
    height: 40px;
    background: #f47a20;
    position: relative;
}
#headermenu .menu {
    background: #F47B20;
    float: left;
    border: 1px solid #D66C1C;
    padding: 0.6em 1em;
    margin-top: 0.5em;
    list-style-type: none;
}
#headermenu-left {
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    margin: 0;
}
#headermenu-left .menu {
    border-width: 0;
    border-bottom: 4px solid #004B8D;
}
<body>
    <div id="headermenu">
        <ul id="headermenu-left">
            <li class="menu">
                <a href="#">Link 1</a>
            </li>
            <li class="menu">
                <a href="#">Link 2</a>
            </li>
            <li class="menu">
                <a href="#">Link 3</a>
            </li>
            <li class="menu">
                <a href="#">Link 4</a>
            </li>
            <li class="menu">
                <a href="#">Link 5</a>
            </li>
            <li class="menu">
                <a href="#">Link 6</a>
            </li>
        </ul>
    </div>
</body>

1
  • This does work, but then I lose the fancy effect of defining the menu borders and everything is just links. It's a bit annoying that the bottom border has the others in its corners (although it also makes sense that it should).
    – Tominator
    Oct 16, 2013 at 14:20
0

Unfortunately this is how borders work. Those are the ends of your border-left, and border-right. Here's a work around though, I added a div to the bottom of your list:

(I also removed your width:70%; from your list)

#bluebar {
    position:absolute;
    bottom:0px;
    width:100%;
    height:5px;
    background-color:blue;
}

http://jsfiddle.net/BjGvp/6/

3
  • Is it okay to put a div inside an ul like that?
    – Tominator
    Oct 16, 2013 at 14:18
  • No, that's invalid HTML. Oct 16, 2013 at 14:22
  • Not the greatest solution :) I'd rather have a div wrapped around the list, then put #bluebar in that div instead. Oct 16, 2013 at 14:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.