slight problem with rollover menu

antonyx · #1 Feb 1st, 2007, 21:57

hello all.. hope you are well.. havent posted for a long time..

if someone could give me a hand here ill be really grateful..

im still gettin a problem with the third level appearing to the
right of the 2nd level.. like it used to do in this picture..

http://www.londonheathrowcars.com/third.jpg

at the moment.. in my firefox browser it is doing this..

http://www.londonheathrowcars.com/thisthing.jpg
the page can be found here..

http://www.londonheathrowcars.com/newmenu2.htm

i have added the same padding properties the original home button has
to the rollover items.. and the text stays the same now which is
great..

the only problems now are the third levels not appearing to the right..
i think ill be able to align them.. but gettin this third level
working is proving difficult..

here is the new page code..

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<style type="text/css" media="all">

* {
  margin:0;
  padding:0;
}

body {
  background-color:#EBEBEB;
}

/*DIVS*/

div#wrap {
  width:750px;
  position:absolute;
  left:50%;
  margin: 0 0 0 -375px;
  border:1px solid #666666;
  background-color:#ffffff;
}

div#main {
  width:750px;
  background-color:#ffffff;
}

div#menu .bccor {
  border-color:#ffffff #ffffff #ffffff #ffffff;
}

ul#nav {
  list-style-type:none;
}

ul#nav li.outerLi {
  display:block;
  border-width:1px 1px 1px 1px;
  border-color:#ffffff #b3b3b3 #b3b3b3 #ffffff;
  border-style:solid;
  position:relative;
  font-family:arial;
  float:left;
  font-size:80%;
  color: #666666;
  width:73px;
  padding:.3em 0 .3em 0 ;
  background:white;
  text-align:center;
}

a {
 color: #666666;
 text-decoration: none;
}

ul#nav li ul {
  margin:0px;
  padding:0px;
  list-style-type:none;
  display:none;
}

/*ul#nav li ul li {
  padding:0px;
  height:16px;

}*/

ul#nav li ul li a {
  padding-top:3px;
  display:block;
  height:17px;
  padding:.3em 0 .3em 0 ;
}

div#menu ul li ul {
  display:none;

}

ul#nav li ul li a {
  background: #EBEBEB;
  display:block;
}

* html #menu ul li ul li a {
  height:1%;/*ie hack, don't know if it breaks ie7*/
}

ul#nav li ul li a:hover {
  background-color:#666666;
  border-width:1px;
  border-color:#666666;
  font-family:arial;
  font-weight:120;
  color: #F99C08;
  padding:.3em 0 .3em 0 ;

}

ul#nav li:hover ul, ul#nav li.over ul {
  display:block;
}

.text {
  float:left;
  margin-top:30px;
  width:600px;
}

</style>

</head>

<body>
<div id="wrap">
<div id="menu">

<ul id="nav">

   <li class="outerLi"><a href="##">Home</a>
           <ul>
              <li><a href="##">ITEM 1A</a>

          <li><a href="#">thirdlevel a</a></li>

               <li><a href="#">thirdlevel a 2</a></li>

           </ul>
    </li>


 </ul>
</div>
<div id="main">
<br><br><br><br><br><br><br><br><br><bR><bR>
</div>
</div>

</body>

</html>

can someone please give me a hand here.. thanks.

ukgeoff · #2 Feb 5th, 2007, 21:43

You seem to be missing the <ul>...</ul> for the third level.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] css rollover menu help	danny322	Web Page Design	7	Oct 23rd, 2007 13:58
Rollover navigation menu	SJMAC	Web Page Design	14	Feb 7th, 2007 14:07
Rollover menu / popup window	magiccupcake	JavaScript Forum	3	Dec 18th, 2006 16:10
Slight end of script problem	a.jenery	Classic ASP	5	Apr 22nd, 2006 00:50
Rollover delay problem, please help!	stealthmonkey	JavaScript Forum	11	Feb 12th, 2006 02:24

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
slight problem with rollover menu