Hi, You can also create in css html. I have created in my assignment. check my code :
<div id="navigation">
<ul>
<li>
<a href="#">Menu Item 1</a>
<ul>
<li><a href="#">sub menu item 1</a></li>
<li><a href="#">sub menu item 2</a></li>
<li><a href="#">sub menu item 3</a></li>
<li><a href="#">sub menu item 4</a></li>
</ul>
</li>
<li>
<a href="#">Menu Item 2</a>
<ul>
<li><a href="#">sub menu item 1</a></li>
<li><a href="#">sub menu item 2</a></li>
<li><a href="#">sub menu item 3</a></li>
<li><a href="#">sub menu item 4</a></li>
</ul>
</li>
<li>
<a href="#">Menu Item 3</a>
<ul>
<li><a href="#">sub menu item 1</a></li>
<li><a href="#">sub menu item 2</a></li>
<li><a href="#">sub menu item 3</a></li>
<li><a href="#">sub menu item 4</a></li>
</ul>
</li>
<li>
<a href="#">Menu Item 4</a>
<ul>
<li><a href="#">sub menu item 1</a></li>
<li><a href="#">sub menu item 2</a></li>
<li><a href="#">sub menu item 3</a></li>
<li><a href="#">sub menu item 4</a></li>
</ul>
</li>
</ul>
</div>
and use style code below for that:
#navigation{
width:100%;
height:30px;
background-color:#CCCCCC;
}
#navigation ul
{margin:0px; padding:0px;}
#navigation ul li
{
display:inline;
height:30px;
float:right;
list-style:none;
margin-left:15px;
position:relative;
}
#navigation li a
{color:#000000; text-decoration:none;}
#navigation li a:hover
{text-decoration:underline;}
#navigation li ul
{
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
top:20px;
background-color:#cccccc;
}
#navigation li:hover ul
{
display:block;
width:160px;
}
#navigation li li
{
list-style:none;
display:list-item;
width:100%;
}
#navigation li li a
{color:#000000; text-decoration:none;}
#navigation li li a:hover
{text-decoration:underline;}
You will have to remember that for each part you will have to write styles.
for this menu there is navigation --> ul --> li-->ul--->li, so u will have to write style for each ul and li.
