It's not because of a height property. Your .block
has a overflow: hidden;
(wich is also on your nav
), this causes that the major part of your subnavigation is not visible.
Superfish second level ul very tiny
Question
The problem is the superfish menu on my website: http://alexander-pastor.de/
When hovering the mouse over the li of the top-level's ul, the child ul has only a height of 16px. I can't fix it somehow. Adding height/min-height css-property to ul or li does not seem to work.
I added the class sf-menu to the ul via jQuery, because it is autogenerated code from a contao-module. It is wrapped by a nav-element. Like this:
<nav class="mod_navigation block">
<ul class="level_1 sf-menu">
<li>
<ul>...
</li>
... ...
... ...
</ul>
</nav>
I'd be very grateful, if someone could take look into this :D
I am using the latest version of superfish. I included the following in the head-tag:
<script type="text/javascript">
$(document).ready( function() {
$('#header-navigation ul.level_1').addClass('sf-menu');
});
$(document).ready(function(){
// initialise plugin
var example = $('#header-navigation ul.level_1').superfish({});
});
</script>
<script type="text/javascript" src="files/version9/plugins/superfish/superfish.js"> </script>
<script type="text/javascript" src="files/version9/plugins/superfish/hoverIntent.js"></script>
superfish.css contains:
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu li {
position: relative;
min-height:40px;/*cust*/
line-height:1.0;
}
.sf-menu ul {
position: absolute;
display: none;
top: 100%;
left: 0;
z-index: 10000;
}
.sf-menu > li {
float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
display: block;
}
.sf-menu li:hover > ul,/*cust*/
.sf-menu li.sfHover > ul li{
display: block;
min-height:40px;
line-height:1.0;
}
.sf-menu a, .sf-menu span {
display: block;
position: relative;
padding:12px 16px;
}
.sf-menu {
float: left;
margin-bottom: 1em;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.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 {
color: #13a;
}
.sf-menu li {
background: rgb(16, 16, 16);
background: rgba(16, 16, 16, 1);
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;
}
.sf-menu ul li {
background: rgb(60, 60, 60);
background: rgba(60, 60, 60, 0.8);
}
.sf-menu li.first{
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
}
.sf-menu ul ul li {
background: rgb(51, 51, 51);
background: rgba(51, 51, 51, 0.8);
height:40px;
}
.sf-menu ul ul ul li {
background: rgb(34, 34, 34);
background: rgba(34, 34, 34, 0.8);
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background:rgb(40,40,40);
outline:0;
text-shadow:
-1px -1px 3px #fff,
-1px -1px 4px #fff;
text-decoration:none;
}
.sf-menu li:hover,
.sf-menu li.sfHover {
background: rgb(40, 40, 40);
background: rgba(40, 40, 40, 0.8);
/* 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; /* edit this to suit design (no rgba in IE8) */
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;
border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
border-left-color: rgba(255,255,255,.5);
}
.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 {
border-left-color: white;
}
There should not be a conflict with my default.css?!
default.css - section containing #header**
#header {
border-radius:...;
color:#fff;
}
#header a{
color:#fff;
text-decoration:none;
}
#header-menu{
width:1000px;
height:46px;
background: ...;
text-align: center;
border-radius...
}
#header-menu-elements{
margin:5px 0;
}
#header-menu-elements{
height:36px;
float:left;
background:transparent;
}
#header-navigation{
height:40px;
background:...;
border-radius:...;
}
Solution
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow