Click here to Skip to main content
15,113,531 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have a vertical navigation menu and when I hover over my link it shows the sub navigation menu or side panel with a whole bunch of other links. The problem that I'm dealing with is that the sub navigation doesn't go all the way up. It's beneath my link and for some reason it doesn't work when I do "bottom: 30px" in my subnav-content selector. I want the the height of the subnav content to be 100%, but there's something blocking it from going all the way up. I don't know what it is and I could use some help with this.

I also wanted to show everyone a screenshot of the problem, but I don't know how to do it on here. If you just copy all the code at the bottom, you will see the problem that I'm dealing with.

HTML Code:
<!DOCTYPE html>
<html>
<head>
    <title>nested anchor links in divs</title>
    <link rel="stylesheet" href="styles/styling.css">
</head>

<body>
    <div id="outer-container">
        <div id="sidebar">
            <a href="#"><img src="images/play logo.webp" alt="play" id="play" height='25px' width='25px'><span>Play</span></a>
            <div id="subnav-content">
                <a href="#">Play</a>
                <a href="#">Live Chess</a>
                <a href="#">Daily Chess</a>
                <a href="#">Computer</a>
                <a href="#">Tournaments</a>
                <a href="#">4 Player Chess</a>
                <a href="#">Variants</a>
                <a href="#">Leaderboard</a>
                <a href="#">Library</a>
            </div>
        </div>
        <div id="content">




        </div>
    </div>

</body>

</html>


CSS code:
html {
	height: 100%;
}

body {
	margin: 0;
	height: 100%;
}

#outer-container {
	display: table;
	width: 100%;
	height: 100%;
}

#sidebar {
	display: table-cell;
	width: 15%;
	height: 100%;
	vertical-align: top;
	background-color: rgb(68, 68, 68);
}

#content {
	display: table-cell;
	width: 85%;
	vertical-align: top;
	background-color: gray;
}

#sidebar a {
	background-color: rgb(20, 15, 15); 
	color: white; 
	display: flex; 
	align-items: center;
	padding: 10px; 
	text-decoration: none; 
}

#sidebar img {
	padding-top: .5em;
	padding-right: .1em;
}

#subnav-content {
	position: relative;
    display: block;
    top: 0;
	bottom: 30px;
    left: 100%;
	width: 100%;
    min-width: 180px;
    white-space: nowrap;
    z-index:1;
}


What I have tried:

I've tried adding some pixels to the bottom of the subnavigation using the bottom property, but that doesn't work.
Posted
Updated 28-Jul-21 22:57pm

1 solution

You' added position:relative to the #subnav-content. That means the top is relative to the natural position of the element, which will be beneath the preceding <a> element.

position - CSS: Cascading Style Sheets | MDN[^]

If you want to position it at the top of the container, you need to make two changes:
CSS
#sidebar {
    ...
    position: relative;
}
And:
CSS
#subnav-content {
    position: absolute;
    ...
}
Demo[^]
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900