Superfish CSS Navigation liste déroulante largeur

Question

sur ma page: http://bn-servers.de J'utilise superfish.js et css. Maintenant, mon sous-menu a une grande largeur, mais je ne sais pas pourquoi.

mon code css:

/*** ESSENTIAL STYLES ***/ 
.sf-menu, .sf-menu * { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
.sf-menu li { 
    position: relative; 
} 
.sf-menu ul { 
    position: absolute; 
    display: none; 
    top: 100%; 
    left: 0; 
    z-index: 99; 
} 
.sf-menu > li { 
    float: left; 
} 
.sf-menu li:hover > ul, 
.sf-menu li.sfHover > ul { 
    display: block; 
} 

.sf-menu a { 
    display: block; 
    position: relative; 
} 
.sf-menu ul ul { 
    top: 0; 
    left: 100%; 
} 


/*** DEMO SKIN ***/ 
.sf-menu { 
    float: left; 
} 
.sf-menu ul { 
    box-shadow: 2px 2px 6px rgba(0,0,0,.2); 
    min-width: 12em; /* allow long menu items to determine submenu width */ 
    *width: 12em; /* no auto sub width for IE7, see white-space comment  

below */ 
} 
.sf-menu a { 

    text-decoration: none; 
    zoom: 1; /* IE7 */ 
} 
.sf-menu a { 
    color: #13a; 
    padding: 10px; 
    text-align: left; 
} 
.sf-menu li { 
     background: #302f2f; /* Old browsers */ 
    background: -moz-linear-gradient(top, #302f2f 0%, #000000 100%); /* 

FF3.6-15 */ 
    background: -webkit-linear-gradient(top, #302f2f 0%,#000000 100%); 
    background: linear-gradient(to bottom, #302f2f 0%,#000000 100%); 
    white-space: nowrap; /* no need for Supersubs plugin */ 
    *white-space: normal; /* ...unless you support IE7 (let it wrap) */ 
    -webkit-transition: background .2s; 
    transition: background .2s; 
    height:40px ; 
} 
.sf-menu ul li { 
    background: #ff9500; 
} 
.sf-menu ul ul li { 
    background: #ff9500; 
} 
.sf-menu li:hover, 
.sf-menu li.sfHover { 
    background: #ff7500; 
    /* only transition out, not in */ 
    -webkit-transition: none; 
    transition: none; 
} 

/*** arrows (for all except IE7) **/ 
.sf-arrows .sf-with-ul { 
    padding-right: 2.5em; 
    *padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */ 
} 
/* styling for both css and generated arrows */ 
/*.sf-arrows .sf-with-ul:after { 
    content: ''; 
    position: absolute; 
    top: 50%; 
    right: 1em; 
    margin-top: -3px; 
    height: 0; 
    width: 0; 
    /* order of following 3 rules important for fallbacks to work */ 
    /*border: 5px solid transparent; 
    border-top-color: #dFeEFF; 
    /*border-top-color: rgba(255,255,255,.5); 
} 
*/ 
.sf-arrows > li > .sf-with-ul:focus:after, 
.sf-arrows > li:hover > .sf-with-ul:after, 
.sf-arrows > .sfHover > .sf-with-ul:after { 
    border-top-color: white; /* IE8 fallback colour */ 
} 
/* styling for right-facing arrows */ 
.sf-arrows ul .sf-with-ul:after { 
    margin-top: -5px; 
    margin-right: -3px; 
    border-color: transparent; 
} 
.sf-arrows ul li > .sf-with-ul:focus:after, 
.sf-arrows ul li:hover > .sf-with-ul:after, 
.sf-arrows ul .sfHover > .sf-with-ul:after { 
} 

Demandez à quiconque une solution à ce bug? Je veux que le sous-menu ait la même largeur que l'élément de menu parent.

Answer 1

S'il vous plaît essayez ceci:

largeur Supprimer: 700px de nav ul.

Dans votre style.css 943.

Answer 2

La largeur de 700px de la ul fait référence aux informations de style css

nav ul { 
    height: 40px; 
    margin: 0 auto; 
    padding: 0; 
    width: 700px; 
} 

Vous pouvez éviter cela avec l'enfant css Selektor (>),

Mais faites attention aux mots comme "Rechenzentrum", qui serait trop long.

nav > ul { 
} 

Answer 3

La valeur minimale de largeur est trop, vous pouvez le changer à certaine largeur comme celui-ci:

.sf-menu ul { 
    box-shadow: 2px 2px 6px rgba(0,0,0,.2); 
    width: 10em; 
}