CSS - How can I make a simple navigation menu with submenus? - html

Question

I am learning HTML and CSS at the moment. I have my navigation menu done, but I have submenus under the main selections. Here is my code:
#navigation ul {
font-family:Arial;
list-style-type:none;
margin:0;
padding:0;
}
#navigation li {
font-family:Arial;
font-size:11px;
display:inline;
float:left;
background-color:#FFF;
}
#navigation a {
display:block;
width:60px;
background-color:#FFF;
}
And here is my HTML (I am making a site on Half Life and Portal to learn):
<div id="menus">
<div id="navigation">
<ul>
<li>Aperture Science</li>
<ul>
<li>GLaDOS</li>
<li>Testing Chambers</li>
<li>The Player (Chell)</li>
</ul>
</ul>
<ul>
<li>Black Mesa</li>
<ul>
<li>The Combine</li>
<li>The Resistance</li>
<li>The Player (Gordon Freeman)</li>
</ul>
</ul>
</div>
What do I need to change?
Note: Yes, I haven't finished putting in quick 'a' tags...

Answer 1

you can use this code---
<div id="menus">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home
<ul class="submenu">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
</ul>
</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
css--
#menus ul{
padding:0
}
#menus ul li{
display:inline-block;
margin-right:-2px;
position:relative;
}
#menus ul li a{
display:inline-block;
padding:5px 10px;
background:red;
color:#FFF;
}
#menus ul ul{
position:absolute;
left:0;
width:0px;
transition:all .5s;
}
#menus ul.submenu li{
display:block;
transform:scale(0, 1);
transition:all .5s;
}
#menus ul.submenu li:nth-child(2){
transition-delay:.05s;
}
#menus ul.submenu li:nth-child(3){
transition-delay:.1s;
}
#menus ul.submenu li:nth-child(3){
transition-delay:.15s;
}
#menus ul.submenu li:nth-child(4){
transition-delay:.2s;
}
#menus ul.submenu li:nth-child(5){
transition-delay:.25s;
}
#menus ul li:hover ul{
display:block;
width:auto;
}
#menus ul li:hover ul li{
transform:scale(1, 1);
transform-origin: right top;
}
view the jsfiddle live demo

Answer 2

Check code
#menus ul{
padding:0
}
#menus ul li{
display:inline-block;
margin-right:-2px;
position:relative;
}
#menus ul li a{
display:inline-block;
padding:5px 10px;
background:#ccc;
color:#000;
text-decoration: none;
}
#menus ul li a:hover{background: #666;}
#menus ul ul{
position:absolute;
left:0;
width:200px;
transition:all .5s;
max-height: 0;
overflow: hidden;
}
#menus ul.submenu li{
display:block;
}
#menus ul.submenu li a{
display:block;
background:blue;
color: #fff;
}
#menus ul.submenu li a:hover{background: #333;}
#menus ul li:hover ul{
max-height: 10000px;
}
<div id="menus">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Sub Menu
<ul class="submenu">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
</ul>
</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>

Answer 3

Try This code:
HTML CODE:
<div id="menus">
<div id="navigation">
<ul>
<li>Aperture Science</li>
<ul>
<li>GLaDOS</li>
<li>Testing Chambers</li>
<li>The Player (Chell)
<ul>
<li>GLaDOS</li>
<li>Testing Chambers</li>
<li>The Player (Chell)</li>
</ul>
</li>
</ul>
</ul>
<ul>
<li>Black Mesa</li>
<ul>
<li>The Combine</li>
<li>The Resistance</li>
<li>The Player (Gordon Freeman)</li>
</ul>
</ul>
</div>
CSS CODE:
#navigation ul {
font-family:Arial;
list-style-type:none;
margin:0;
padding:0;
}
#navigation li {
font-family:Arial;
font-size:11px;
display:inline;
float:left;
background-color:#FFF;
position: relative;
}
#navigation a {
display:block;
width:60px;
background-color:#FFF;
}
#navigation ul li ul{
position: absolute;
top: 28px;
opocity: 0;
display: none;
}
#navigation ul li:hover ul{
opocity: 1;
display: block;
}
SEE DEMO http://jsfiddle.net/JentiDabhi/j50Lncva/