user1532468
Reputation: 1753
How do I make a dropdown submenu appear next to its parent
I have a menu that includes a sub menu which to most parts works well. However, when you click an item in the menu, the sub menu opens but is not lining up next to the item selected. It just stays as the top next to the main menu.
It is rather difficult to explain, so I posted code on as a snippet and would would apprecite it if someone could point out my error. Many thanks
.menu {
width: 100%;
height: 40px;
margin: 0;
padding: 0;
background: #0c323f;
position: static;
}
.navigation {
list-style: none;
padding: 0;
margin: 0 0 0 16px;
background: rgb(58, 58, 58);
font-size: 16px;
}
.navigation li {
float: left;
}
.navigation li:hover {
background: #1a4655;
}
.navigation li:first-child {
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 0 0 5px;
}
.navigation li a {
display: block;
padding: 0 20px;
text-decoration: none;
line-height: 40px;
color: #fff;
}
.navigation ul {
display: none;
position: absolute;
list-style: none;
margin-left: -3px;
padding: 0;
}
.navigation ul ul {
left: 100%;
top: 0;
width: 250px;
border-bottom-left-radius: 0 !important;
}
.navigation ul li {
float: none;
}
.navigation li:hover > ul {
display: block;
background: #1a4655;
/* border: solid 3px #fff;*/
border-top: 0;
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
position: absolute;
width: 250px;
}
.navigation li:hover > ul li:hover {
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.navigation li li a:hover {
background: #0c323f;
color: white;
}
.navigation ul li:last-child a,
.navigation ul li:last-child a:hover {
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}<div class="menu">
<ul class="navigation">
<li><a href="/domain/admin/index.php" title="Home">Home</a></li>
<li><a href="/domain/admin/test.php" title="Requests">Requests</a>
<ul>
<li><a href="" title="Boxes">Boxes</a>
<ul>
<li><a href="" title="Add">Add Box(es)</a></li>
<li><a href="" title="Retrievals">Retrievals</a></li>
<li><a href="" title="Returns">Returns</a></li>
<li><a href="" title="Destructions">Destructions</a></li>
<li><a href="" title="Permanent Retrieval">Permanent Retrieval</a></li>
</ul>
</li>
<li><a href="" title="Boxes">Files</a>
<ul>
<li><a href="" title="Add">Add File(s)</a></li>
<li><a href="" title="Retrievals">Retrievals</a></li>
<li><a href="" title="Returns">Returns</a></li>
<li><a href="" title="Destructions">Destructions</a></li>
<li><a href="" title="Permanent File Retrieval">Permanent File Retrieval</a></li>
</ul>
</li>
<li><a href="" title="Boxes">Recycle Collection</a>
<ul>
<li><a href="" title="Sacks">Sacks</a></li>
<li><a href="" title="Boxes">Boxes</a></li>
</ul>
</li>
<li><a href="" title="Box Supply">Box Supply</a></li>
<li><a href="" title="Sack Supply">Sack Supply</a></li>
</ul>
</li>
<li><a href="" title="Reports">Reports</a></li>
<li><a href="" title="Invoices">Invoices</a></li>
<li><a href="/domain/admin/cp.php" title="Control Panel">Control Panel</a></li>
<li><a href="/domain/admin/logout.php" title="Logout">Logout</a></li>
</ul>
<div class="clear"></div>
</div>Upvotes: 1
Views: 41
Answers (1)
sol
Reputation: 22949
Add position: relative to .navigation ul li.
.menu {
width: 100%;
height: 40px;
margin: 0;
padding: 0;
background: #0c323f;
position: static;
}
.navigation {
list-style: none;
padding: 0;
margin: 0 0 0 16px;
background: rgb(58, 58, 58);
font-size: 16px;
}
.navigation li {
float: left;
}
.navigation li:hover {
background: #1a4655;
}
.navigation li:first-child {
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 0 0 5px;
}
.navigation li a {
display: block;
padding: 0 20px;
text-decoration: none;
line-height: 40px;
color: #fff;
}
.navigation ul {
display: none;
position: absolute;
list-style: none;
margin-left: -3px;
padding: 0;
}
.navigation ul ul {
left: 100%;
top: 0;
width: 250px;
border-bottom-left-radius: 0 !important;
}
.navigation ul li {
float: none;
position: relative;
}
.navigation li:hover>ul {
display: block;
background: #1a4655;
/* border: solid 3px #fff;*/
border-top: 0;
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
position: absolute;
width: 250px;
}
.navigation li:hover>ul li:hover {
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.navigation li li a:hover {
background: #0c323f;
color: white;
}
.navigation ul li:last-child a,
.navigation ul li:last-child a:hover {
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}<div class="menu">
<ul class="navigation">
<li><a href="/domain/admin/index.php" title="Home">Home</a></li>
<li><a href="/domain/admin/test.php" title="Requests">Requests</a>
<ul>
<li><a href="" title="Boxes">Boxes</a>
<ul>
<li><a href="" title="Add">Add Box(es)</a></li>
<li><a href="" title="Retrievals">Retrievals</a></li>
<li><a href="" title="Returns">Returns</a></li>
<li><a href="" title="Destructions">Destructions</a></li>
<li><a href="" title="Permanent Retrieval">Permanent Retrieval</a></li>
</ul>
</li>
<li><a href="" title="Boxes">Files</a>
<ul>
<li><a href="" title="Add">Add File(s)</a></li>
<li><a href="" title="Retrievals">Retrievals</a></li>
<li><a href="" title="Returns">Returns</a></li>
<li><a href="" title="Destructions">Destructions</a></li>
<li><a href="" title="Permanent File Retrieval">Permanent File Retrieval</a></li>
</ul>
</li>
<li><a href="" title="Boxes">Recycle Collection</a>
<ul>
<li><a href="" title="Sacks">Sacks</a></li>
<li><a href="" title="Boxes">Boxes</a></li>
</ul>
</li>
<li><a href="" title="Box Supply">Box Supply</a></li>
<li><a href="" title="Sack Supply">Sack Supply</a></li>
</ul>
</li>
<li><a href="" title="Reports">Reports</a></li>
<li><a href="" title="Invoices">Invoices</a></li>
<li><a href="/domain/admin/cp.php" title="Control Panel">Control Panel</a></li>
<li><a href="/domain/admin/logout.php" title="Logout">Logout</a></li>
</ul>
<div class="clear"></div>
</div>Upvotes: 1
Related Questions
- How do I make a dropdown submenu appear directly below its parent <li>?
- Dropdown menu appearing not below parent
- Can't make CSS submenu show up below its parent
- How to display submenu on dropdown using positioning and CSS?
- How to display a sub menu to the side of a drop down menu
- How can I make a sub-menu appear adjacent to main menu and not below it with css?
- css positioning drop down under parent
- CSS, Help adding sub menu to drop down menu
- Can't make CSS dropdown menu show up below its parent?
- CSS: make dropdown submenu appear below parent <ul> <li>