CODEWITHSUNDEEP
htmlcssdrop-down-menu
Yogesh Yadav
Yogesh Yadav

Reputation: 404

How can I make a sub-menu appear adjacent to main menu and not below it with css?

Please see this jsfiddle demo here. When I hover over sub1, the sub-sub-menu covers sub2. How do I make the sub-sub-menu appear on the right to the sub-menu but adjacent to sub1 (or sub2, as applicable)?

ul.topbar {
	padding:0;
			list-style: none;
			background: #f2f2f2;

}
ul.topbar li {
			display: inline-block;
			position: relative;
			line-height: 5vh;
			text-align: left;


}
ul.topbar li a {
			display: block;
			padding: 8px 25px;
			color: #333;
			text-decoration: none;
			white-space: nowrap;

}
ul.topbar li a:hover {
			color: #fff;
			background: #939393;
			white-space: nowrap;
}
ul.topbar li ul.dropdown {
			
			background: #f2f2f2;
			display: none;
			position: absolute;
			z-index: 999;
			left: 0;
}
ul.topbar li:hover ul.dropdown {
			display: block;	/* Display the dropdown */
}
ul.topbar li ul.dropdown li {
			display: block;
}


ul.topbar li ul.dropdown  {
	padding:0;
			list-style: none;
			background: #f2f2f2;
}
ul.topbar li ul.dropdown li {
			display: inline-block;
			position: relative;
			line-height: 5vh;
			text-align: left;
}
ul.topbar li ul.dropdown li a {
			display: block;
			padding: 8px 25px;
			color: #333;
			text-decoration: none;
}
ul.topbar li ul.dropdown li a:hover {
			color: #fff;
			background: #939393;
}
ul.topbar li ul.dropdown li ul.dropdown {
			min-width: 100px; /* Set width of the dropdown */
			background: #f2f2f2;
			display: none;
			position: absolute;
			z-index: 999;
			left: 0;
}
ul.topbar li ul.dropdown li:hover ul.dropdown {
			display: block;	/* Display the dropdown */
			position:absolute;
}
ul.topbar li ul.dropdown li ul.dropdown li {
			display: block;
			
}
<ul class="topbar">
        <li><a href="../index.html">top1</a></li>
        <li><a href="#">top2</a></li>
        <li> <a href="#" > top3 &#9662;</a>
        	<ul class="dropdown">
        		<li> <a href="#" > sub1 &#9656; </a>
        			<ul class="dropdown"> 
                    	<li> <a href="#" >asfg </a></li>
                        <li> <a href="#" >hbch </a></li>
                        <li> <a href="#" >erft </a></li>
                        <li> <a href="#" >erft </a></li>
                        <li> <a href="#" >erft </a></li>
                    </ul>
        		</li>
        		<li> <a href="#" >sub2 &#9656; </a>
                	<ul class="dropdown">
                    	<li> <a href="#" >rtiuji </a></li>
                        <li> <a href="#" >erft </a></li>
                        <li> <a href="#" >erft </a></li>
                        <li> <a href="#" >erft </a></li>
                        <li> <a href="#" >erft </a></li>
                    </ul>
                </li>
        	</ul>
        </li>
        <li><a href="#">top5 &#9662;</a>
            <ul class="dropdown">
                <li><a href="../net-jrf/phys-sci/main.html">Phy</a></li>
                <li><a href="../net-jrf/chem-sci/main.html">Chem</a></li>
                
            </ul>
        </li>
        <li><a href="#">top6</a></li>
</ul>

Upvotes: 0

Views: 195

Answers (1)

tbernard
tbernard

Reputation: 468

In your CSS rule ul.topbar li ul.dropdown li ul.dropdown you want to fix the positioning.

You're already using position: absolute, that means this element will be positioned an absolute distance from the top left corner of it's closest ancestor with positioning set.

You then set left:0. That means make the left side be 0 pixels from the left side of it's ancestor. If you switch that to something like 100% (% positioning is based off the size of the ancestor not the element itself) you would now have pushed the menu over from the left by the full size of the ancestor - i.e. it will have it's left side aligned with the right side of the ancestor.

In your specific case you'll probably also want to add a top:0. Otherwise the element will keep it's original top position below the ancestor and be almost impossible to get your mouse over.

Also you might want to consider simplifying your rules. Take advantage of how CSS rules cascade so you don't have to make a unique rule for every level of your menu.

Upvotes: 1

Related Questions