2 replies [Last post]
McNab
Offline
newbie
Norway
Last seen: 12 years 3 weeks ago
Norway
Timezone: GMT+2
Joined: 2007-07-28
Posts: 2
Points: 0

I am working on a page with a floating left menu.
When i hover the menu, sub menues apears.

http://home.broadpark.no/~thorhn/index.html

Is there a way to deffine the width and placement of the sub menues different from the main menu?

HTML code :


CSS kode

.menu ul {
position:fixed;
top: 9em;
left: 70em;
margin: 0;
padding: 0;
list-style: none;
width: 100px; /* Width of Menu Items */
border: 2px solid #ccc;

}

.menu ul li {
position: relative;
}

.menu li ul {
position: absolute;
left: -102px; /* Set 1px less than menu width */
top: 0;
display: none;
}

/* Styles for Menu Items */
.menu ul li a {
display: block;
text-align: center;
font-weight: bold;
color: #f9f9f9;
background: #DBBA75; /* IE6 Bug */
padding: 5px;
border-top:1px solid #fff; border-bottom:1px solid #000;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

.menu ul li a:hover {
color: #DBBA75;
background: #f9f9f9;
} /* Hover Styles */

.menu li ul li a {
padding: 2px 5px;
width: 200;
right: -100px;
} /* Sub Menu Styles */

.menu li:hover ul, li.over ul {
display: block;
} /* The magic */

csscr
csscr's picture
Offline
Enthusiast
Last seen: 1 year 4 weeks ago
Timezone: GMT+7
Joined: 2003-03-12
Posts: 126
Points: 55

ul ul

Hi McNab,
Since you are setting the width using ul then you can target the child ul and give them a different width.
.menu ul ul{width:80px;}

McNab
Offline
newbie
Norway
Last seen: 12 years 3 weeks ago
Norway
Timezone: GMT+2
Joined: 2007-07-28
Posts: 2
Points: 0

HI Thanks it worked I

HI

Thanks it worked :thumbsup:

I added

.menu ul ul {
width: 150px;
}

And changed the left value

.menu li ul {
position: absolute;
left: -152px; /* Set 1px less than menu width */
top: 0;
display: none;
}