Set the width of the superfish Control

Superfish is a Menu Control Based on jquery, which is easy to use and easy to configure.

For details, see: http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started

 

When I was using superfish today, I felt that its menu items were somewhat wide and there was a visual conflict with my original page style. So I tried to change it.

 

The method is as follows:

1. Find the superfish.css file and open it.

2. Find

. SF-menu Li: hover ul, <br/>. SF-menu Li. sfhover ul {<br/> left: 0; <br/> top: 2.5em;/* match top ul list item height */<br/> Z-index: 99; <br/>} 

Modify the top value, which is the distance between the sub-menu and the parent menu.

3. Find

. SF-menu A {<br/> border-left: 1px solid # FFF; <br/> border-top: 1px solid # cfdeff; <br/> padding :. 75em 1em; <br/> text-Decoration: none; <br/>} 

Padding:. 75em this is the top filling height of the menu item. You can change it to a smaller value.