I came across this example and tried to implement it, but I'm facing some difficulties. Any assistance would be greatly appreciated.
UPDATE: I managed to position my submenu better with the help of yourkishore and figured out how to deal with nested menus. However, my submenu is still displaying right at the bottom of my text?
HTML:
<ul id="menubar">
<div id="title">title</div>
<li>File
<ul>
<li>Photoshop CC</li>
<li>Illustrator CC Adobe</li>
<li>My Web Design
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li>Config</li>
</ul>
<div id=other></div>
CSS
html, body {height:100%;width:100%;margin:0;}
#menubar {
background: #eeeeee;
height:25%;
list-style-type: none;
width:100%;
display: inline-table;
margin:0;
padding:0;
z-index:99;
}
#menubar #title {
display:inline-block;
padding:0 5%;
font-size:140%;
font-weight:bold;
float:left;
height:100%;
display: inline-flex;
align-items: center;
}
#menubar li {
height:100%;
position:relative;
float:left;
padding:0 1%;
list-style-type: none;
white-space:nowrap;
display: inline-flex;
align-items: center;
}
#menubar li:hover {
background-color:#7faddb;
}
#menubar li > ul {
background-color:white;
z-index:99;
display: none;
position:absolute;
list-style-type: none;
margin:0;
padding:0;
}
#menubar li:hover > ul {
display: block;
}
#other {
background-color:green;
position:absolute;
top:25%;
bottom:0;
left:0;
right:0;
}