I tested this in chrome and firefox:
:root {
--menu-clr-back:#84774d;
--menu-clr-text:#eeeeee;
--menu-clr-hover-back:#eeeeee;
--menu-clr-hover-text:#84774d;
--menu-padding: 0.2em;
--menu-separator: 2px;
--menu-box-shadow:0.1em 0.1em 0.1em #0008;
}
/* all menu items */
nav>h1 {display:none;}
nav ul {
color: var(--menu-clr-text);
list-style-type:none;
margin:0;padding:0;
white-space:nowrap;
display:flex;
}
nav li {
position:relative;
padding: var(--menu-padding);
background: var(--menu-clr-back);
}
/* top level menu */
nav ul:not(nav ul ul) {
}
/* top level menu-items */
nav ul:not(nav ul ul)>li {
display:inline-block;
margin-right: var(--menu-separator);
}
/* top level menu-items */
nav ul:not(nav ul ul)>li:last-child {
margin-right: none;
}
/* all sub menus */
nav ul ul {
position:absolute;
display:none;
top:0;
left:100%;
box-shadow:var(--menu-box-shadow);
}
/* first sub menu */
nav ul ul:not(ul ul ul) {
top:100%;
left:0;
}
/* all sub menus */
nav li:hover>ul {
display:inline-block;
}
nav li:hover {
color: var(--menu-clr-hover-text);
background: var(--menu-clr-hover-back);
}
nav li li:has(ul)::after {
content:'▸';
display:inline-flex;
}
nav li li
{
width:100%;
}<nav>
<ul>
<li>[Item 1]</li>
<li>[Item 2]
<ul>
<li>[Item 2.1]</li>
<li>[Item 2.2] some</li>
<li>[Item 2.3]</li>
</ul>
</li>
<li>[Item 3]</li>
<li>[Item 4]
<ul>
<li>[Item 4.1] some</li>
<li>[Item 4.2]
<ul>
<li>[Item 4.2.1]
<ul>
<li>[Item 4.2.1.1]</li>
<li>[Item 4.2.1.2]</li>
<li>[Item 4.2.1.3]</li>
</ul>
<li>[Item 4.2.2]</li>
<li>[Item 4.2.3]</li>
</ul>
</li>
<li>[Item 4.3]</li>
</ul>
</li>
<li>[Item 5]</li>
<li>[Item 6]
<ul>
<li>[Item 6.1]</li>
<li>[Item 6.2]</li>
<li>[Item 6.3]</li>
</ul>
</li>
</ul>
</nav>The box-shadow of the menu panels is not the size of the elements. But why is this, and how can I fix it?
Also: what is moving submenu 4.2.1 a little bit up?
2
Answers
Q. what is moving submenu 4.2.1 a little bit up?
Check pseudo class
::after > '▸',You can change the display properties, and you can resize them.
Q. What is causing my box-shadow to not have the size of element?
Can you check this page?
https://drafts.csswg.org/css-backgrounds/#shadow-layers
How box-shadow Works
The box-shadow property in CSS is used to apply shadows to elements, and it does not affect the size or layout of the element itself. This happens because box-shadow is purely a visual effect that does not alter the element’s box model.
Visual Effect Only: The box-shadow property only adds a visual shadow around the element; it doesn’t change the element’s actual dimensions or its position. The shadow is rendered outside the element but does not contribute to the element’s size.
No Impact on Layout: Since box-shadow doesn’t affect the element’s width, height, or any layout-related properties (margin, padding), it doesn’t cause the element to take up more space. The shadow is simply a graphical effect that sits outside the element’s box.
Rendering Order: The browser calculates the element’s size and position first, and then applies the shadow. The shadow is drawn based on the element’s border box, but it is not considered part of the box model, meaning it doesn’t affect how other elements are placed around it.
Summary
The box-shadow property is used purely for enhancing the visual appearance of an element, without altering its size or layout. This is because the shadow is treated as an external graphic effect, separate from the element’s actual dimensions.
I hope it helps. 🙂
Your drop-shadow doesn’t appear as large as your drop-down menu as your defining the width of the list items (li) as 100% and then then you’re adding on the padding. If you style list items as
box-sizing: border-boxthe 100% width will match the drop-down menu so the shadows will align.As for your pseudo element not aligning with the adjacent item, it is because, as @NINE points out, it’s a problem with the caret. If you apply
line-height: 1;to the pseudo element, it will make it the same height as the text.Your
--menu-box-shadow:0.1em 0.1em 0.1em #0008;definition has small sizes (0.1em is 1.6px) and #0008 needs some more numbers (#000000).