CSS box model question (calculating width & paddings)

When I have an element with 100% width & height and 10px padding then this element takes 100% of its parent AND 10px around it.

I know it is logical for divs, spans, but in my opinion going off of the parent elements is rather irritating when it com开发者_开发技巧es to links, buttons etc.

I've created this menu yesterday, try to hover links in sub-menu too see what's wrong:

http://jsfiddle.net/ps5Tf/

overflow: hidden would do the thing, but it hides 3rd level menus as well:

http://jsfiddle.net/ps5Tf/1/

(hover Features > Feature #5 in both examples to see the difference)

I don't want to add nbsps; etc.

Any simple solution?

---

there's few things, but as you said you know about the widths then the simple solution is not to use width on the a - display: block; automatically makes it takes it's parents width (and height actually) minus any padding you want to use,

here's some CSS only which corrects issues and makes it work in IE7 too which is wasn't before..

body {
    background-color: #eee;
}

#menu, #menu ul {
    list-style: none;
    padding: 0; 
    margin: 0;
}

#menu li {
    display: inline;
    float: left;
    /* position: relative;  put this on the hover for IE7 */
}

#menu li:hover {position: relative;}

#menu li a {
    display: block;
    padding: 0 15px;
    text-decoration: none;
    font: 14px/56px "Lucida Sans Unicode";
    color: #444;
}

/* 1st level menu */

#menu li ul {
    width: 200px;
    position: absolute;
    left: auto; /* not zero for IE7 */
    border: 1px solid #BBBBBB;
    background-color: #ddd;
}

#menu li ul li {
    width: 100%;
}

#menu li ul li a {
    display: block;
    padding: 0 7px;
    height: 50px;
    line-height: 50px;
}

#menu li ul li a:hover {
    background-color: #fff;
}

/* 2nd level menu */

#menu li ul li ul {
    top: 0;
    left: 100%;
}

/* hide sub-menus */

.sub-menu {
    visibility: hidden;
}

/* instead of jQuery for demo */
#menu li:hover > .sub-menu {visibility: visible;)

---

Do not use floats on elements you want to display at 100% width + padding. If you must use a float then don't apply padding to the element with 100% width + float. Instead, add a nested element p if its text or span that has no float and has the padding. Doing this will also help you avoid issues in IE.

http://jsfiddle.net/ps5Tf/6/

Here is your working CSS:

body {
    background-color: #eee;
}

#menu {
    list-style-type: none;
}

#menu li {
    position: relative;
    display: inline;
}

#menu li a {
    display: inline-block;
    height: 60px;
    overflow:hidden;
    padding: 0 15px;
    text-decoration: none;
    font: 14px/56px "Lucida Sans Unicode";
    color: #444;
}

/* 1st level menu */

#menu li ul {
    width: 200px;
    position: absolute;
    left: 0;
    display: block;
    padding: 0;
    border: 1px solid #BBBBBB;
    background-color: #ddd;
    border-top: 0;

}

#menu li ul li {

}

#menu li ul li a {
    padding: 0 7px;
    height: 50px !important;
    line-height: 50px;
    display: block;
}

#menu li ul li a:hover {
    background-color: #fff;
}

/* 2nd level menu */

#menu li ul li ul {
    position: absolute;
    top: 0;
    left: 200px;
}

/* hide sub-menus */

.sub-menu {
    visibility: hidden;
}

---

the problem is that the anchor has a width 100% and a padding too, that's why the highlight goes off the list. remove the width from the css.

#menu li ul li a {
padding: 0 7px;
height: 50px !important;
line-height: 50px;
display: block;
width: 100%;
}

---

If you remove the padding on you #menu li ul li a{} the highlighting won't overflow http://jsfiddle.net/ps5Tf/2/

---

Perhaps creating a white image the width and height you want and setting it as the background on hover would do what you need to. Not ideal but I don't see any other way of avoiding the overflow given your constraints.

---

Why not set the widths of the LIs:

http://jsfiddle.net/KS2Gg/

---

In general, you do not want to use 100% width on a display: block; element (there are some cases where you do, but it's usually conflicting ideas).

Anyway, display: block; stretches the entire width of the parent and includes the padding with it.