6 replies [Last post]
FuxiAdmin
Offline
newbie
Last seen: 9 years 21 weeks ago
Timezone: GMT+1
Joined: 2010-05-21
Posts: 4
Points: 5

Hi

I'm trying to create an expandinging menu with CSS. I've managed to get the first opetion to drop down, but the others dont seem to work and I don't know why.

Here's the menu I've made, http://fuximagazine.com/dev/commenu.html#

Here's the CSS for it;

#fuximenu {
font-family: Arial;
font-size: 100%;
width: 160px;
padding: 1px;
margin: 0px;
}
 
#fuximenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
background-color:#b07973;
width:160px;
}
 
#fuximenu ul li {
margin: 0px;
padding: 0px;
}
 
#fuximenu ul li a {
font-family: Arial;
font-weight: bold;
font-size: 80%;
display: block;
border-bottom: 2px solid #a39a85;
padding: 2px 0px 3px 8px;
text-decoration: none;
color: #ffffff;
width:160px;
}
 
#fuximenu ul li a:hover, #fuximenu ul li a:focus {
color: #443513;
background-color: #cca09b;
}
 
.menu1{
margin-left:10px;
padding-left:0px;
padding-top:2px;
padding-bottom: 2px;
display:block;
text-decoration: none;
color: #000000;
height: 20px;
}
 
.submenu{
background-color: #999;
font-family: Arial;
font-size: 75%;
display: block;
padding: 1px 0px 2px 20px;
border-bottom: 2px solid #999;
text-decoration: none;
color: #ffffff;
width:160px;
}
 
.hide{
display: none;
}
 
.show{
display: block;
}

Could anybody tell me what I've done wrong?

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 5 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

change

change these...

showHide('menu1')

to this

showHide('mymenu1')
 
showHide('mymenu2')
 
showHide('mymenu3')

Hope that made sense.

FuxiAdmin
Offline
newbie
Last seen: 9 years 21 weeks ago
Timezone: GMT+1
Joined: 2010-05-21
Posts: 4
Points: 5

That worked, thanks a

That worked, thanks a lot.

One final thing, I want to create a roll over instance for the submenu options, darker background and bold. Do you know what I would put into the CSS to include this?

Thanks again.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 5 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

just edit .submenu to fit

just edit .submenu to fit your needs

FuxiAdmin
Offline
newbie
Last seen: 9 years 21 weeks ago
Timezone: GMT+1
Joined: 2010-05-21
Posts: 4
Points: 5

I tried .submenu ul li

I tried

.submenu ul li a:hover, .submenu ul li a:focus {
color: #443513;
background-color: #cca09b;
}

But this did do the trick

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 5 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

.submenu:hover{color: red;

.submenu:hover{color: #443513; font-weight: bold; background: #cca09b;}

FuxiAdmin
Offline
newbie
Last seen: 9 years 21 weeks ago
Timezone: GMT+1
Joined: 2010-05-21
Posts: 4
Points: 5

Thank You so much Works

Thank You so much

Works amazing now