Submenus in html using css, can someone help me to create submenus on html using css?? |
Submenus in html using css, can someone help me to create submenus on html using css?? |
nupur_the_seeker |
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="#">«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.... |
Frederiek |
Apr 9 2012, 03:00 AM
Post
#2
|
Programming Fanatic Group: Members Posts: 5,146 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".
|
Lo-Fi Version | Time is now: 25th April 2024 - 07:08 AM |