3 replies [Last post]
revad
Offline
newbie
Last seen: 16 years 3 weeks ago
Joined: 2006-06-17
Posts: 2
Points: 0

anyone know how to do this? - i would like the menu to be placed in the right hand side of a 3 column table.. and so the pop out submenus appear on the left of the main menu... not to the right as it currently does.. thankyou! ( in anticipation! )

the entire code is in the html document..

<html>
<head>
<title> Pop Up Menu 5</title>

<style>
* {
padding: 0;
margin: 0;
font-family: Arial, sans-serif;
}

body {
margin: 20px;
font-size: 12px;
}

body {
behavior: url(csshover.htc);
}

ul {
list-style: none;
width: 125px;
}

ul a {
color: #FFF;
text-decoration: none;
display: block;
padding: 5px 5px 5px 10px;
width: 125px;
background: #333;
}

ul a:hover {
color: #4BD8FF;
text-decoration: none;
background: #3C3C3C;
}

ul li {
border-bottom: 1px solid #FFF;
float: left;
position: relative;
}

ul li ul {
list-style: none;
position: absolute;
left: 140px;
top: 0;
display: none;
width: 125px;
border-left: 1px solid #FFF;
}

ul li:hover ul { display: block; }

ul li:hover ul li ul { display: none; }

ul li ul li:hover ul { display: block; }
</style>

</head>
<body>

<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Gallery</a>
<ul>
<li><a>Gallery 1</a></li>
<li><a>Gallery 2</a></li>
<li><a>Gallery 3</a></li>
<li><a>Gallery 4</a></li>
</ul>
</li>
<li><a>Products</a>
<ul>
<li><a>Category 1</a>
<ul>
<li><a>Product 1</a></li>
<li><a>Product 2</a></li>
</ul>
</li>
<li><a>Category 2</a>
<ul>
<li><a>Product 3</a></li>
</ul>
</li>
<li><a>Category 3</a>
<ul>
<li><a>Product 4</a></li>
<li><a>Product 5</a></li>
<li><a>Product 6</a></li>
<li><a>Product 7</a></li>
</ul>
</li>
<li><a>Category 4</a>
<ul>
<li><a>Product 8</a></li>
<li><a>Product 9</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>[img][/img]

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 38 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Re: Help with pop out menus

revad wrote:

ul li ul {
list-style: none;
position: absolute;
left: 140px;
top: 0;
display: none;
width: 125px;
border-left: 1px solid #FFF;
}

Change the left to a negative value.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 10 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

[Solved] Help with pop out menus

And get yourself a doctype, they're free Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

revad
Offline
newbie
Last seen: 16 years 3 weeks ago
Joined: 2006-06-17
Posts: 2
Points: 0

[Solved] Help with pop out menus

thanks for the help I appreciate it, got it sorted out now