I’ve listed “rules” for the menu regarding its style, those are important and it’s why the menu is so difficult to style. I have a screenshot of what the end result is supposed to be like in the pen.
It’s 98% done, it’s the border issue that is halting progress.
I call it the impossible menu because it seems whatever technique I try, one or more rules end up being broken. anchor link borders, highlights, LI borders, negative margin border tricks, fancy css sibling/descendent selector chains, pseudo elements as borders, border images, border backgrounds. Just having no luck.
Then again, it could be one of those super easy techniques I should have tried first but didn’t and then never thought of it again kind of things.
The solution to the problem can contain extra markup or classes if needed, but clean source is good, as well as non-fragile uncomplicated css.
Hi I have played around with it unfortunately I am not using SCCS i am using plain CSS
HTML
<div id="menu">
<ul>
<li><a href="#">SERVICES</a></li>
<li><a href="#">LOCATIONS</a></li>
<li><a href="#">PEOPLE</a></li>
<li><a href="#">PRODUCTS</a>
<ul>
<li><a href="#">PRODUCT1</a></li>
<li><a href="#">PRODUCT2</a></li>
<li><a href="#">PRODUCT3</a>
<ul>
<li><a href="#">LEVEL2</a></li>
<li><a href="#">LEVEL2</a></li>
<li><a href="#">LEVEL2</a></li>
</ul>
</li>
<li><a href="#">PRODUCT4</a></li>
</ul>
</li>
<li><a href="#">LAST</a></li>
</ul>
</div>
<div class="notes">
<h1>RULES</h1>
<ul>
<li>The background highlight is 100% wide of the menu on both hover and li.active states.</li>
<li>The border color must match the highlight color so that the border is not visible when hovering, or on the active li.</li>
<li>There is a gap between menu wrapper and the border. Creating this gap is a big part of the challenge while maintaining full width highlights. The border should not touch the edges or be full width horizontally.</li>
<li>When hovering over a link that is adjecent to the active link, the borders continue to be hidden across both highlighted links.</li>
</ul>
<h2>Challenge</h2>
<ul>
<li>What I find difficult is maintaining the 100% width of the highlighted links while also trying to create the horizontal padding between the edges of the menu and the borders.</li>
<li>It is also difficult to adjust the borders for the active and hovered links because the borders may or may not be a part of adjecent li's. I can target a sibling or descendent li but in the case where there are submenus, the last link in a submenu cannot be used to target the adjoining li of the parent ul.</li>
<li>I have also tried techniques using standard border on the 'a' links but I run into issues requiring me to work with hover states on the li nodes as well as the 'a' links, it's ugly CSS.</li>
<li>Targeting the LIs themselves becomes difficult due to the submenus, creating need for great specififity selector chains.</li>
<li>I have attempted standard border on the 'a' link. Standard border on the li. Background on the link. Psuedo elements to fake a border. At least 4 or 5 techniques could not accomplish it.</li>
</ul>
<h3>This is what it is basically supposed to look like:</h3>
<img src="https://i.imgur.com/3CccDyz.png" />
</div>
CSS
*{
box-sizing:border-box;
font-family: Merriweather, serif;
}
#menu{
display:inline-block;
}
#menu ul{
background-color:#efefef;
/* if must apply width */
/* be wary applying size means edditing the
padding on all the items simply adding otherwise use % padding */
list-style:none;
margin:0px;
padding:0px;
}
/* All Li */
#menu li{
width:100%;
position:relative;
}
/* Hover effects on the links */
#menu a:link{
width:95%;
color:#5E5E68;
display:block;
text-decoration:none;
border-bottom:RGBA(125, 125, 125, 0.5) solid 1px; /* Apply the gradient here in replace of the border */
padding:10px;
margin:0px 0px 0px 2%;
position:relative;
z-index:1;
}
/* these must be edited if Ul becomes fixed width to maintain the order */
#menu li ul a:link{
padding:10px 20px;
}
#menu li ul a:visited{
padding:10px 20px;
}
#menu li ul li ul a:link{
padding:10px 30px;
}
#menu li ul li ul a:visited{
padding:10px 30px;
}
#menu a:visited{
color:#5E5E68;
}
#menu a:hover{
background-color:#0BBCDC;
width:100%;
margin:-1px 0px 0px 0px;
border-bottom:#0BBCDC solid 1px;
}
I don’t know if this is what you were looking for but I hope I helped a bit
just the borders you used, using gradients I didn’t use I used plain borders so the thickness to light on borders is the only problem I couldn’t fix but I honestly hope I helped
the borders are hidden when on hover by using negative margins and borders are only applied to the bottom not the top also the ul gradient has not been applied.
I had already done most everything you did here. Removing the topmost and bottommost borders was easy. I had done the negative margin trick to remove the appearance of double border.
The only piece I missed was the z-index. I didn’t think about that, the border was still visible but it didn’t occur to me that an anchor was on top of the above anchor, making the border still visible.
Lesson learned.
If you visit my pen again, it should be fully working.
