Horizontal Rollover Menu

CM1
1

I’m using the default “Horizontal rollover” menu but my sub menu items are showing without rolling over. Why is that?

2

Matt,

That is strange. Are you seeing this while viewing the page through the Content tab, or are you viewing a Preview or a published instance of the page? Pages viewed through the Content tab don’t always reflect the appearance of a published page due to interference from the user interface. If you’re seeing this on previewed or published pages, you might try a quick test of changing the widget’s layout properties to Horizontal, saving, and then changing back to Horizontal rollover, to ensure that the settings are taking. Also, check to see if there might be any CSS styling your nav bar which could be interfering with how the navigation is displaying.

Nathaniel

3

I’m viewing the page at Preview point in a new window.

4

Matt,

The rollover affect relies on a JS library called SuperFish to create the effect. Make sure you don’t have any script conflicts or javascript errors. You can pull up Developer Tools in most current browsers (F12) and view the console for any errors.

Additionally, make sure you don’t have some CSS style set to “!important” that causes list items to be visible or of display “block”.

5

I checked my CSS and I don’t have anything set to display block. I do have a few items set to !important in my css for the menu but nothing that I thought would affect it showing up correctly.

.sf-menu  
{  
float: left;   
width: 960px !important;   
padding: 0;   
list-style-type: none !important;   
margin: 0 10px;   
}   
 
.sf-menu li   
{   
display: inline;   
height: 36px !important;  
float: left;   
z-index: 99;   
position: relative;   
}   
 
.sf-menu a   
{   
color: white !important;   
font-size: 15px;   
line-height: 2.250em !important;   
height: 100% !important;   
width: 100% !important;   
margin: 0 10px !important;   
}   
 
.sf-menu li:hover  
{  
background-color: #444;   
}   
 
.sf-menu li.current   
{   
background-color: #444;   
}   
 
.sf-menu li:hover   
{   
color: #840000 !important;   
}
6

Daved,

I got it fixed. It was something with my css. I went to SuperFish’s website and looked at the default CSS code and got it working.