i tried to create submenus in my html page menu but they r not appearing.i dont know what is causing these submenus to dissapear.is thr anyone who can help me with it
the html file contents are:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mobile and Landline Services|Onstream Telecom</title>
<meta name="keywords" content="Mobile,Landline,Offers,Services,Telecom,Onstream Telecom" />
<meta name="description" content="Mobile and Landline Services provided by Onstream Telecom" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<marquee behaviour="slide" direction="left">
<img src="C:\Users\amita\Desktop\project\images\air1.png">
<img src="C:\Users\amita\Desktop\project\images\air3.png">
<img src="C:\Users\amita\Desktop\project\images\air4.png">
<img src="C:\Users\amita\Desktop\project\images\air2.png">
</marquee>
<style type="text/css">
#nav{
list-style:none;
font-weight:bold;
margin-bottom:10px;
/* Clear floats */
float:left;
width:100%;
/* Bring the nav above everything else--uncomment if needed.
position:relative;
z-index:5;
*/
}
#nav li{
float:left;
margin-right:10px;
position:relative;
}
#nav a{
display:inherit;
padding:5px;
color:#fff;
background:#FF0000;
text-decoration:none;
}
#nav a:hover{
color:#fff;
background:#FF0000;
text-decoration:underline;
}
/*--- DROPDOWN ---*/
#nav ul{
background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
list-style:none;
position:absolute;
/*left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
float:none;
}
#nav ul a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
background:#6b0c36;
text-decoration:underline;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
background:#333;
}
<!--
body,td,th {
font-size: 12px;
}
-->
</style></head>
<body>
<div id="main">
<!-- header begins -->
<div id="header">
<div id="logo"><a href="#">Onstream Telecom </a>
<h2><a href="#">no. 1 service provider </a></h2>
</div>
<div id="buttons">
<ul id="nav">
<li><a href="#" title="" style="width:auto">Home</a></li>
<li><a href="#" title="" style="width:150px">Postpaid Plans </a></li>
<li><a href="#" title="">Prepaid Offers </a></li>
<li><a href="#" title="">Applications</a>
<ul>
<li><a href="#" title="">Apply for new connection</a></li>
<li><a href="#" title="">Apply for connection modification</a></li>
</ul>
</li>
<li><a href="#" style="width:auto"title="">Status</a></li>
<li><a href="#" title="">Complaints</a></li>
<li><a href="#" title="" style="width:auto">Details</a></li>
<li><a href="" title="">Logout</a></li>
</ul></div>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="content">
<div id="right">
<div id="sidebar">
<ul>
<li>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="251" height="215">
<param name="flash_component" value="ImageViewer.swc" />
<param name="movie" value="images/registerslide.swf" />
<param name="quality" value="high" />
<param name="FlashVars" value="flashlet={imageLinkTarget:'_blank',captionFont:'Verdana',titleFont:'Verdana& #39;,showControls:false,frameShow:false,slideDelay:3,captionSize:10,captionColor
:#333333,titleSize:10,transitionsType:'Zoom',titleColor:#333333,slideAutoPlay:true,imageURLs:['images/regpic1.jpg','images/regpic2.jpg','images/regpic3.jpg','images/regpic4.jpg','images/regpic5.jpg','images/regpic6.jpg','images/regpic7.jpg','images/regpic8.jpg','images/regpic9.jpg','images/regpic10.jpg','images/regpic11.jpg','images/regpic12.jpg','images/regpic13.jpg'],slideLoop:true,frameThickness:2,imageLinks:['http://macromedia.com/','http://macromedia.com/','http://macromedia.com/'],frameColor:#333333,bgColor:#FFFFFF,imageCaptions:[]}" />
<embed src="images/registerslide.swf" quality="high" flashvars="flashlet={imageLinkTarget:'_blank',captionFont:'Verdana',titleFont:'Verdana& #39;,showControls:false,frameShow:false,slideDelay:3,captionSize:10,captionColor
:#333333,titleSize:10,transitionsType:'Zoom',titleColor:#333333,slideAutoPlay:true,imageURLs:['images/regpic1.jpg','images/regpic2.jpg','images/regpic3.jpg','images/regpic4.jpg','images/regpic5.jpg','images/regpic6.jpg','images/regpic7.jpg','images/regpic8.jpg','images/regpic9.jpg','images/regpic10.jpg','images/regpic11.jpg','images/regpic12.jpg','images/regpic13.jpg'],slideLoop:true,frameThickness:2,imageLinks:['http://macromedia.com/','http://macromedia.com/','http://macromedia.com/'],frameColor:#333333,bgColor:#FFFFFF,imageCaptions:[]}" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="251" height="215"> </embed>
</object>
<h2>Calendar </h2>
<ul>
<li id="calendar">
<div id="calendar1">
<table id="calendar2" summary="Calendar">
<caption>
February 2012
</caption>
<thead>
<tr>
<th abbr="Monday" scope="col" title="Monday">M</th>
<th abbr="Tuesday" scope="col" title="Tuesday">T</th>
<th abbr="Wednesday" scope="col" title="Wednesday">W</th>
<th abbr="Thursday" scope="col" title="Thursday">T</th>
<th abbr="Friday" scope="col" title="Friday">F</th>
<th abbr="Saturday" scope="col" title="Saturday">S</th>
<th abbr="Sunday" scope="col" title="Sunday">S</th>
</tr>
</thead>
<tfoot>
<tr>
<td abbr="Des" colspan="3" id="prev"><a href="#">«Jan</a></td>
<td class="pad"> </td>
<td abbr="Feb" colspan="3" id="next" class="pad"><a href="#">Mar »</a></td>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="2" class="pad"> </td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td id="now">24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td class="pad" colspan="2"> </td>
</tr>
</tbody>
</table>
</div>
</li>
</ul>
</li>
</ul>
</div>
<!-- end #sidebar -->
</div>
<div id="left">
<h2>Welcome User to Onstream Telecom!!</h2>
<p>Here you can view all the available Postpaid Plans,Prepaid Offers,Apply for New Connections,Connection Modification,Connection Cancellation,Application Status,Post Complaints and view your personal details </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<!-- content ends -->
<!-- footer begins -->
<div id="laa2"><div id="footer">
<p>Copyright © 2012|Designed by Telecom Web Development Team|Training Project<br />
All Rights Reserved
</p>
</div></div>
<!-- footer ends -->
</body>
</html>
and the css file linked is given below:
a:link {
color: #000000;
}
a:hover {
text-decoration: underline;
color: #000000;
}
a:visited {
color: #000000;
}
*
{
border: 0;
margin: 0;
}
body
{
background: #ffffff url(images/back_all.jpg) repeat-x top;
font: 12px Tahoma, Arial, Helvetica, sans-serif;
color: #000000;
margin-top: 10px;
}
#main
{
margin: 0 auto;
width: 912px;
background: url(images/table_back.jpg) repeat-y;
}
#header
{
background: url(images/header.jpg) no-repeat;
width: 912px;
height: 262px;
}
#logo
{
padding-left: 40px;
text-align: center;
padding-top: 40px;
height: 40px;
}
#logo a {
text-decoration: none;
text-transform: uppercase;
font-style:normal;
font-size: 20px;
color: #000000;
font-weight: bold;
}
#logo H2 a
{
font-size: 14px;
}
#buttons
{
padding-top: 140px;
height: 40px;
padding-left: 0px;
}
#buttons li {
display:inline;
}
#buttons ul li ul li a
{
margin:0px;
padding:0px;
display:none;
position:absolute;
}
#buttons a {
display: block;
float: left;
width: 130px;
height: 30px;
margin-left: 1px;
text-align: center;
text-decoration: none;
color: #000000;
font-weight: bold;
font-size: 16px;
padding-top: 10px;
}
#buttons a:hover {
text-decoration: underline;
color: #f63800;
}
#content
{
width: 870px;
padding: 15px;
}
#left
{
width: 580px;
padding: 10px;
}
#left H1
{
color: #f5430f;
margin: 0;
padding: 0;
font-size: 24px;
}
#left H3
{
color: #f5430f;
margin: 0;
padding: 0;
font-size: 20px;
}
#left H2
{
color: #f5430f;
margin: 0;
padding: 0;
font-size: 18px;
padding-top: 10px;
}
#left a
{
color: #f5430f;
}
#left a:hover {
text-decoration: none;
color: #f5430f;
}
#left a:visited {
color: #f5430f;
}
.small
{
margin: 15px;
padding: 5px;
border: 1px solid #99A067
}
#right
{
float: right;
width: 254px;
}
#calendar1 {
padding: 0 10px 20px 10px;
}
#calendar table {
width: 100%;
text-align: center;
}
#calendar thead {
background: #F1F1F1;
}
#calendar tbody td {
border: 1px solid #F1F1F1;
}
#calendar #prev {
text-align: left;
}
#calendar #next {
text-align: right;
}
#calendar tfoot a {
text-decoration: none;
font-weight: bold;
}
#calendar #now {
background: #b1b1b1;
border: 1px solid #000000;
font-weight: bold;
color: #ffffff
}
#sidebar
{
width: 254px;
}
#sidebar ul
{
margin: 0;
padding: 0;
list-style: none;
background: url(images/title_back.gif) no-repeat;
}
#sidebar li
{
margin-bottom: 15px;
}
#sidebar li ul {
padding: 10px;
border-top: none;
}
#sidebar li li {
margin: 0;
padding: 3px 0;
}
#sidebar li h2 {
height: 34px;
margin: 0;
padding: 10px 0 0 20px;
background: #8eabaf url(images/title.gif) no-repeat;
font-size: 18px;
color: #f5430f;
text-align:center;
}
#sidebar a:link {
text-decoration: none;
}
#sidebar a:hover {
text-decoration: underline;
}
#sidebar a:visited {
text-decoration: none;
}
#sidebar li a {
padding-left: 10px;
background: url(images/img09.gif) no-repeat 1px 5px;
}
#footer
{
background: url(images/footer.gif) repeat-x;
height: 52px;
font-size: 10px;
color: #000000;
padding-top: 20px;
text-align: center;
border-top: #ffffff solid 5px;
}
#footer a
{
color: #000000;
font-size: 10px;
text-decoration: none;
}
.padding
{
padding: 10px;
color:#FF0000;
font-weight: bold;
}
.reg
{
background-image:url(images/reg_back.gif);
border:5px double;
border-color:#FFCCCC;
}
.abtus
{
background-color:#FFCCCC;
}
as you can see i have created 2 submenus under the menu item "Application" but when i run it in browser i'm unable to see the submenus as if they were nvr created.
plz help me guys as soon as possible...waiting for ur replies....
Have a look at Listamatic2: http://css.maxdesign.com.au/listamatic2/ on how to create submenus, see as an example "Pure CSS hover list".
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)