css horizontal menu is outside of round div layer

Question

I am trying to make my horizontal menu have round edges, however the inner "li" elements seem to overlap the div layer.

Here is an example for what I mean:

<div class="menu">
<ul>
    <li>Home</li>
    <li>Test</li>
    <li>Test 2</li>
</ul>

.menu {
     background-color:#CCC;
    border-radius:10px;
    border:1px solid black;
    z-index:9999999;
}

ul {
    list-style-type:none;
    margin:0;
    padding:0;
    z-index:-9999;
}

li {
    display:inline;
    background-color:red;
    z-index:-9999;
}

Here is the fiddle http://jsfiddle.net/3zeUg/ Have a look at the very left li element, it overlaps with it's square border into the round border.

I tried setting z-indexes without any success. I also tried giving the li elements a round border, but then each of the elements has a round border, which I don't want and since I am working on a wordpress theme, I should stick to the standards that are given.

I came across this website here: http://mypeoplesrock.com/ and in the menu you can see he has round borders but the inside element doesn't overlap. Looking at his css file, I can't seem to find what he did differently.

Thank you

score 1 · Accepted Answer · answered Apr 13 '14 at 15:43

1

Just add overflow: hidden; to .menu to prevent inner elements to bleed through the border.

Use the positioning method of your choice to refine the layout inside of the menu afterwards.

answered Apr 13 '14 at 15:43

David Aurelio

474
2
10

score 0 · Answer 2 · answered Apr 13 '14 at 15:38

0

you can use text-indent;

ul {
...
text-indent: 15px;
...
}

or margin-left;

ul {
...
margin: 0 0 0 15px;
...
}

answered Apr 13 '14 at 15:38

Umut D.

1,557
20
22

score 0 · Answer 3 · answered Apr 13 '14 at 15:39

0

Try to add padding-left: 5px; to your .menu CSS

answered Apr 13 '14 at 15:39

PierreF

2,250
4
22
40

score 0 · Answer 4 · answered Apr 13 '14 at 15:41

0

I suppose you are talking about DEMO

li:first-child{
   border-top-left-radius:10px; 
   border-bottom-left-radius:10px;
}

answered Apr 13 '14 at 15:41

4dgaurav

10,721
4
27
55

score 0 · Answer 5 · answered Apr 13 '14 at 15:41

Just play around with the padding inside of .menu.

HTML

<div class="menu">
    <ul>
        <li>Home</li>
        <li>Test</li>
        <li>Test 2</li>
    </ul>
</div>

CSS

.menu {
 background-color:#CCC;
border-radius:10px;
border:1px solid black;
z-index:9999999;
padding: 10px;
}

ul {
list-style-type:none;
margin:0;
padding:0;
z-index:-9999;
}

li {
display:inline;
background-color:red;
z-index:-9999;
}

score 0 · Answer 6 · answered Apr 13 '14 at 15:45

You could try adding "overflow: hidden" to the "menu" class. This will hide the parts of the list going outside of the div.

.menu {
     background-color:#CCC;
    border-radius:10px;
    border:1px solid black;
    z-index:9999999;
    overflow: hidden;
}

You could also try adding rounded corners to the first list element in the list.

li:nth-of-type(1) {
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

score 0 · Answer 7 · answered Apr 13 '14 at 16:25

You can use

li:first-child {
   -moz-border-top-left-radius:10px;
   -webkit-border-top-left-radius:10px;
   border-top-left-radius:10px;
   -moz-border-bottom-left-radius:10px;
   -webkit-border-bottom-left-radius:10px;
   border-bottom-left-radius:10px;
}

css horizontal menu is outside of round div layer

7 Answers7