Superfish CSS Help

Get Started
1

Hi Guys,

Hopefully you can help – I am setting up a superfish menu but have run into two problems.

Firstly, whichever parent menu that contains submenus, should display a border around the parent menu item when hovered over. I have managed to apply the border but it moves the other menu items to make space for the new border. Is there a way that I can set it up so that the menu items stay fixed regardless of the border?

Secondly, at the moment when you hover over a parent menu item that contains submenus, the background color of the parent menu item changes to white. The problem is that only in Firefox, when you click on any of the parent menu items that DONT have submenus, the white background is also being applied. I am trying to just apply the white background to the parent menu item while hovering over the submenus.

I hope this makes sense.
Any helpy will be greatly appreciated!

My CSS is as follows:

/*** ESSENTIAL STYLES **/
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu {
line-height: 1.0;
}
.sf-menu ul {
position: absolute;
top: -999em;
width: 10em; / left offset of submenus need to match (see below) */
height:45px;

}
.sf-menu ul li {
width: 100%;

}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 ‘sticky bug’ /
}
.sf-menu li {
float: left;
position: relative;
background:transparent;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: -1px;
top: 45px; / match top ul list item height */
z-index: 10;
}
ul.sf-menu ul li.first {
border-top: 1px solid black;
}
ul.sf-menu ul li.last {
border-bottom: 1px solid black;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: 42px;
}

/*** DEMO SKIN ***/
.sf-menu {
float: left;
margin-bottom: 0;
font-family:Arial, Helvetica, sans-serif;
}
.sf-menu a {
text-decoration:none;
}
ul.sf-menu > li > a {
padding: 10px 10px 21px 10px;
padding-right: 10px!important;

}

.{skin_id} ul.sf-menu > li li > a {
padding: 7px 10px 7px 10px;
}

ul.sf-menu a, ul.sf-menu a:visited {
color: black;
font-style:italic;
font-weight:bold;
border-left:solid 1px transparent;
border-right:solid 1px transparent;
}

ul.sf-menu ul a,
ul.sf-menu ul a:visited
{
font-style:normal;
font-size:12px;
font-weight:normal;
border-left:1px solid black;
border-right:1px solid black;
}

.sf-menu li {
font-size:14px;
}

ul.sf-menu > li.current > a
{
color:#F79624;
}

.sf-menu li.sfHover
{
background-color:white;
border-left:solid 1px black;
border-right:solid 1px black;
border-top:1px black solid;
}

.sf-menu li li
{
background: white;
width:175px;
}

ul.sf-menu > li > a:hover,
ul.sf-menu > li.sfHover > a
{
color:#F79624;
}

.sf-menu li li a:hover
{
color:white;
background: #F79624;

}

2

Can you please provide a link to the menu?

3

Unfortunately I only have it running locally at the moment so I cant provide you with a URL, it will eventually be moved live in the next few weeks.
Thanks!

4

You don’t need to provide a link, but copy the code and paste it. Use the [noparse]

[/noparse] tags to do so. Then it will highlight it which it always comes handy :slight_smile:

5

better if you can provide a link so we can help you better, It’s hard to debug those code without the page running…

6

he already said he couldn’t do it right now :slight_smile:

7

Firstly, whichever parent menu that contains submenus, should display a border around the parent menu item when hovered over. I have managed to apply the border but it moves the other menu items to make space for the new border. Is there a way that I can set it up so that the menu items stay fixed regardless of the border?

apply a border to every link, the same color as the link background shows in.
Then the hover only needs to change the color of the link border, it doesn’t need to add a border.