The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Submenus in html using css, can someone help me to create submenus on html using css??
nupur_the_seeker
post Apr 8 2012, 07:42 AM
Post #1





Group: Members
Posts: 1
Joined: 8-April 12
Member No.: 16,870



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="#">&laquo;Jan</a></td>
<td class="pad">&nbsp;</td>
<td abbr="Feb" colspan="3" id="next" class="pad"><a href="#">Mar &raquo;</a></td>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="2" class="pad">&nbsp;</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">&nbsp;</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>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</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....
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 9 2012, 03:00 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 4,500
Joined: 23-August 06
From: Europe
Member No.: 9



Have a look at Listamatic2: http://css.maxdesign.com.au/listamatic2/ on how to create submenus, see as an example "Pure CSS hover list".


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 24th November 2014 - 10:05 AM