March 15, 200917 yr Not sure how to explain it exactly, but the sub menus are hidden underneath the other things i've got on my page. This is the first drop down menu i've ever written the code for, so I'm not sure what to put in my style sheet to make the sub menus show over the top of everything else on the page.
March 15, 200917 yr Have you got a live link, you might just need to use z-index: attribute, but you need position attributes to use z-index. A live link would help, so we can see how it's structured, and what's being used with it (js? or just html/css?).
March 15, 200917 yr Author Ok i've got it working with one of my style sheets by changing the attributes for other parts of my page, but I have another style sheet for a different page and I can't get it to show any of the sub menus at all. I don't have a live link because it's only for an assignment, but here's the css for the web page. ul.menu {list-style:none; margin:0; padding:0;} ul.menu * {margin:0; padding:0;} ul.menu a {display:block; color:#000; text-decoration:none;} ul.menu li {position:relative; float:left; margin-right:2px;} ul.menu ul {position:absolute; top:26px; left:0; background:#d1d1d1; display:none; opacity:0; list-style:none;} ul.menu ul li {position:relative; border:1px solid #aaa; border-top:none; width:148px; margin:0;} ul.menu ul li a {display:block; padding:3px 7px 5px; background-color:#d1d1d1;} ul.menu ul li a:hover {background-color:#c5c5c5;} ul.menu .menulink {border:1px solid #aaa; padding:5px 7px 7px; font-weight:bold; background:url(images/header.gif); width:134px;} ul.menu .menulink:hover, ul.menu .menuhover {background:url(images/header_over.gif);} ul.menu .sub {background:#d1d1d1 url(images/arrow.gif) 136px 8px no-repeat;} ul.menu .topline {border-top:1px solid #aaa;} #header { background-color: #ADD8E6; position: absolute; top: 0px; left: 0px; width: 850px; height: 120px; } #content { background: #4682B4; position: absolute; top: 200px; left: 160px; width: 850px; height: 600px; } p {font-family: Calibri; font-size: 11pt; margin-left: 15px; margin-top: 5px; color:black;} h1 {font-family: Calibri; font-size: 20pt; margin-top: 83px; color:red;} body {background-color:#ADD8E6; margin-left:30px; margin-top:135px; font-size:11pt; font-family: Calibri;} here's the bit of the web page with the menu: <link rel="stylesheet" type="text/css" href="style2.css"/> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css"> <!-- body,td,th { font-family: Calibri; } --> </style></head> <body> <div id="header"> <h1>About Me</h1> </div> <ul class="menu" id="menu"> <li><a href="Homepage.html" class="menulink">Home Page</a></li> <li><a href="Aboutme.html" class="menulink">About Me</a></li> <li> <a href="#" class="menulink">Interests/Hobbies</a> <ul> <li><a href="Films.html">Films</a></li> <ul> <li><a href="Oceanseleven.html">Ocean's Eleven</a></li> <li><a href="Iamlegend.html">I Am Legend</a></li> <li><a href="Reservoirdogs.html">Reservoir Dogs</a></li> </ul> <li><a href="Motorbikes.html">Motorbikes</a></li> <li><a href="Music.html">Music</a></li> <li><a href="Swimming.html">Swimming</a></li> </ul> </li> <li><a href="Myfamily.html" class="menulink">My Family</a></li> <li><a href="Pets.html" class="menulink">Pets</a></li> <li><a href="Placesvisited.html" class="menulink">Places I've Visited</a></li> <li><a href="Contact.html" class="menulink">Contact Me</a></li> </ul> <div id="content"> <p>fdfgfgdfgdf</p> </div> <script type="text/javascript"> var menu=new menu.dd("menu"); menu.init("menu","menuhover"); </script> </body>
March 18, 200917 yr bocaj is right, if you upload it to a test server then provide the link, it's much easier for people to help you.
Create an account or sign in to comment