ENG Courses ENG 1232 ENG 4567 ENG 2312 ACT Courses ACT 2310 ACT 2272 Question: M
ID: 3754920 • Letter: E
Question
ENG Courses
ENG 1232
ENG 4567
ENG 2312
ACT Courses
ACT 2310
ACT 2272
Question: Make a dropdown menu with the following list within a menu container box of 300px × 200px.
The menu container box should be displayed at the top and the right corner of the viewport.
The drop down menu should work properly. When the mouse hovers over a menu item, background color should be changed and the next level menu should be displayed.
When the menu item is clicked, the content should be displayed using alert().
I need to edit the following code for the above question . The one in ??? have to be added and submit
<!DOCTYPE html>
<html>
<head>
<???>
div???ddm-container {
position: ???;
???: 10px;
???: 10px;
width:300px; height:200px;
border:1px solid black;
}
ul???ddm {
list-style: none;
display: inline;
text-align: center;
padding: 0; /* no indentation for the list item */
background: #ddd;
border: 1px solid black;
position: relative;
top: 50px; left: 50px;
}
ul.ddm > li {
display: inline;
???: ???; /* important to give the child elements the correct position with absolute positioning */
cursor: pointer;
}
ul.ddm > li:??? { background: #aaa; }
ul.ddm > li > ul {
list-style: none;
???: ???; /* initially not displayed */
position: ???; /* should be absolute, not relative */
???: 100%; /* 100% height of the parent element, i.e., li */
left: ???;
padding: 0; /* no indentation for the list item */
border: 1px solid black;
}
ul.ddm > li:hover > ??? { display: ???; } /* display the menu back */
ul.ddm > li > ul > li:??? { background: #aaa; }
</style>
<script>
window.???('load', function() {
document.???('ddm').addEventListener(???, function(e) {
var content = e.target.innerHTML.trim();
if (content.indexOf('<ul>') < 0)
alert(content);
});
});
</script>
</head>
<body>
<div id='ddm-container'>
<ul ???='ddm' id=???>
<li>ENG Courses
<ul>
<li>ENG 1232 </li>
<li>ENG 4567</li>
<li>ENG 2312</li>
</ul>
</li>
<li>ACT Courses
<ul>
<li>ACT 2310</li>
<li>ACT 2272</li>
</ul>
</li>
</ul>
</div>
</body>
desired output scrrenshot
COMP Courses MATH Courses COMP 327 COMP 3710 PHP MySQL MVC SPAExplanation / Answer
If you have any doubts, please give me comment...
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div>ddm-container {
position: relative;
top: 10px;
left: 10px;
width: 300px;
height: 200px;
border: 1px solid black;
}
ul>ddm {
list-style: none;
display: inline;
text-align: center;
padding: 0;
/* no indentation for the list item */
background: #ddd;
border: 1px solid black;
position: relative;
top: 50px;
left: 50px;
}
ul.ddm>li {
display: inline;
position: relative;
/* important to give the child elements the correct position with absolute positioning */
cursor: pointer;
}
ul.ddm>li:hover {
background: #aaa;
}
ul.ddm>li>ul {
list-style: none;
display: none;
/* initially not displayed */
position: absolute;
/* should be absolute, not relative */
height: 100%;
/* 100% height of the parent element, i.e., li */
left: 0;
padding: 0;
/* no indentation for the
list item */
border: 1px solid black;
}
ul.ddm>li:hover>ul {
display: block;
}
/* display the menu back */
ul.ddm>li>ul>li:hover {
background: #aaa;
}
</style>
<script>
window.on('load', function() {
document.getElementById('ddm').addEventListener('hover', function(e) {
var content = e.target.innerHTML.trim();
if (content.indexOf('<ul>') < 0)
alert(content);
});
});
</script>
</head>
<body>
<div id='ddm-container'>
<ul class='ddm' id='ddm'>
<li>ENG Courses
<ul>
<li>ENG 1232 </li>
<li>ENG 4567</li>
<li>ENG 2312</li>
</ul>
</li>
<li>ACT Courses
<ul>
<li>ACT 2310</li>
<li>ACT 2272</li>
</ul>
</li>
</ul>
</div>
</body>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.