in Education by
I've got a menu with multiple child elements, the problem I'm having is that the child menu is displaying as the width of its parent, not its child element. Here's my code: #navbar ul { float: none; margin: 0; padding: 0 } #navbar ul li { margin: 0; padding: 0; display: inline-block } #navbar ul li > a, #navbar ul li > span { color: #004665; padding: 10px 0 10px 35px; margin: 0; display: block; font-family: 'roboto-condensed', sans-serif; font-weight: 700; font-size: 24px; text-transform: uppercase; line-height: 72px } #navbar ul li.active > a, #navbar ul li > a:hover, #navbar ul li > a:focus { color: #6fbfe6; background: none } #navbar ul li > ul { position: absolute; background: #f0f5f7; padding: 30px 0 20px; border-top: solid 2px #b1b1b1; display: none } #navbar ul li > ul li { display: block; margin: 0; padding: 0; white-space: nowrap } #navbar ul li > ul li > a { font-size: 20px; line-height: normal; margin: 0; padding: 0 30px 10px; white-space: nowrap } #navbar ul li > ul li > ul { left: 100%; right: 0; z-index: 1000; top: -32px; width: 100% } #navbar ul li > ul li > ul li.parent:hover > ul { display: block } Run code snippetExpand snippet Fiddle here: https://jsfiddle.net/fw16jw1y/ JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

1 Answer

0 votes
by
Remove width: 100% and right: 0 from the following code: #navbar ul li > ul li > ul { left: 100%; right: 0; /* REMOVE */ z-index: 1000; top: -32px; width: 100% /* REMOVE */ } You are containing the ul element by defining width. Working Fiddle

Related questions

0 votes
    I've got a menu with multiple child elements, the problem I'm having is that the child menu is ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Jul 14, 2022 in Education by JackTerrance
0 votes
    I've got a menu with multiple child elements, the problem I'm having is that the child menu is ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Jun 23, 2022 in Education by JackTerrance
0 votes
    What is it called where object has its own lifecycle and child object cannot belong to another parent object? ... questions and answers pdf, java interview questions for beginners...
asked Oct 26, 2021 in Education by JackTerrance
0 votes
    Why text inside / list is not affected (color of "item1", "item2" is not changed) by CSS applied ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 1, 2022 in Education by JackTerrance
0 votes
    Why text inside / list is not affected (color of "item1", "item2" is not changed) by CSS applied ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 29, 2022 in Education by JackTerrance
0 votes
    Why text inside / list is not affected (color of "item1", "item2" is not changed) by CSS applied ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 26, 2022 in Education by JackTerrance
0 votes
    This is part of the component : import MyComp from '../../lib/MyComp' const Data = ( { data } ... , JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Jul 26, 2022 in Education by JackTerrance
0 votes
    This is part of the component : import MyComp from '../../lib/MyComp' const Data = ( { data } ... , JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Jul 20, 2022 in Education by JackTerrance
0 votes
    Setting up the NS record for a child zone in a parent zone is called ____________. A. Domain delegation B. Registrar C. Domain management D. DNS resolution...
asked Nov 21, 2022 in Education by JackTerrance
0 votes
    I am creating a below ABC -- ecs.tf (gives me cluster id) Content of ecs.tf: resource " ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 6, 2022 in Education by JackTerrance
0 votes
    What is it called where child object gets killed if parent object is killed? (a) Aggregation (b) ... programming questions and answers pdf, java interview questions for beginners...
asked Oct 26, 2021 in Education by JackTerrance
0 votes
    We can pass data from the parent component to the child component by using - 1. Input 2. @Input() 3. Output 4. @Output()...
asked Jun 29, 2021 in Technology by JackTerrance
0 votes
    What is a Subjob and how can you pass data from parent Job to child Job?...
asked Mar 18, 2021 in Technology by JackTerrance
0 votes
    What happens to detail record when a master record is deleted? What happens to child record when a parent record is deleted?...
asked Nov 11, 2020 in Technology by JackTerrance
0 votes
    I have a relative layout that has an ImageView and and a textview aligned to right of the ImageView. ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Feb 18, 2022 in Education by JackTerrance
...