I am creating a drupal 7 website and for menu i'm using nice menus.

the problem i am having at the moment is that when i hover over an item in the menu, the height of the menu expands a bit and the child item is cut of at the line between the menu and content. It appears above a views slideshow on the front page and content on other pages. The width of the parent item expands too when hovered any. I am wondering if anybody as had this type of problem before and ways they fixed it. I'll attach my nice_menus_default.css

/*
  This is the default layout template for nice menus, and will provide
  a starting point for the look of your menus. To customize, it's
  recommended to create a custom CSS file using this file as a template,
  then configure the module to use your custom CSS file
  (this is done in the global settings tab of the theme administration.)

  See README.txt and the handbook page (http://drupal.org/node/185543)
  for more information on using the CSS.
*/

/******************************
 Global CSS for ALL menu types
******************************/

/* see https://drupal.org/node/1859124 */

/* About Kilkenny */
ul.nice-menu li.menu-433:before 
{
	content: '';
	position: absolute;
	top: 12px;
	left: 48%;
	width: 30px;
	height: 30px;
	margin-left: -15px;
	background: transparent url('../images/menu_icons_30x30.png') no-repeat 0 -90px;
}

ul.nice-menu li.menu-433:hover:before
{
	background-position: -30px -90px;
}


/* Accomodation */
ul.nice-menu li.menu-404:before
{	
	content: '';
	position: absolute;
	top: 12px;
	left: 48%;
	width: 30px;
	height: 30px;
	margin-left: -15px;
	background: transparent url('../images/menu_icons_30x30.png') no-repeat 0 -120px;
}

ul.nice-menu li.menu-404:hover:before
{
	background-position: 100% -120px;
}
/*
ul.nice-menu-down li.menu-404:hover + .menuparent 
{
	width: 380px;
}
MQ */



/* Things To Do */
ul.nice-menu li.menu-405:before
{	
	content: '';
	position: absolute;
	top: 12px;
	left: 48%;
	width: 30px;
	height: 30px;
	margin-left: -15px;
	background: transparent url('../images/menu_icons_30x30.png') no-repeat 0 -150px;
}
	
ul.nice-menu-down li.menu-405:hover:before
{
	background-position: 100% -150px;
}


/* Getting Around */
ul.nice-menu li.menu-406:before
{	
	content: '';
	position: absolute;
	top: 12px;
	left: 48%;
	width: 30px;
	height: 30px;
	margin-left: -15px;
	background: transparent url('../images/menu_icons_30x30.png') no-repeat 0 -180px;
}
	
ul.nice-menu-down li.menu-406:hover:before
{
	background-position: 100% -180px;
}


/* Places To Visit */
ul.nice-menu li.menu-407:before
{	
	content: '';
	position: absolute;
	top: 12px;
	left: 48%;
	width: 30px;
	height: 30px;
	margin-left: -15px;
	background: transparent url('../images/menu_icons_30x30.png') no-repeat 0 -240px;
}
	
ul.nice-menu-down li.menu-407:hover:before
{
	background-position: 100% -240px;
}


/* Eat and Drink */
ul.nice-menu li.menu-427:before
{	
	content: '';
	position: absolute;
	top: 12px;
	left: 48%;
	width: 30px;
	height: 30px;
	margin-left: -15px;
	background: transparent url('../images/menu_icons_30x30.png') no-repeat 0 -300px;
}
	
ul.nice-menu-down li.menu-427:hover:before
{
	background-position: 100% -300px;
}



/* Special Offers */
ul.nice-menu li.menu-428:before
{	
	content: '';
	position: absolute;
	top: 12px;
	left: 48%;
	width: 30px;
	height: 30px;
	margin-left: -15px;
	background: transparent url('../images/menu_icons_30x30.png') no-repeat 0 -210px;
}
	
ul.nice-menu-down li.menu-428:hover:before
{
	background-position: 100% -210px;
}



/* Festivals */
ul.nice-menu li.menu-429:before
{	
	content: '';
	position: absolute;
	top: 12px;
	left: 48%;
	width: 30px;
	height: 30px;
	margin-left: -15px;
	background: transparent url('../images/menu_icons_30x30.png') no-repeat 0 -330px;
}
	
ul.nice-menu-down li.menu-429:hover:before
{
	background-position: 100% -330px;
}



/* Search */





ul.nice-menu, ul.nice-menu ul {
  list-style: none outside none;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 5;
  /* border-top: 1px solid #ccc; */
   /* z-index: 10; MQ */
}

ul.nice-menu {width: 100%; /* z-index: 100; MQ */ list-style: none outside none;}
   
ul.nice-menu li {
  border: 1px solid #ccc;
  border-top: 0;
  float: left;
}

ul.nice-menu a {
  padding: 64px 13px 14px 1.3em;
  color: #684C8D;
}

ul.nice-menu ul, #header-region ul.nice-menu ul {
  top: 1.8em;
  left: -1px; /* LTR */
  border: 0;
  border-top: 1px solid #ccc;
  margin-right: 0; /* LTR */
}

ul.nice-menu ul li {
  width: 12.5em;
}

ul.nice-menu-right, ul.nice-menu-left, ul.nice-menu-right li, ul.nice-menu-left li {
    width: 12.5em;
}
ul.nice-menu-right ul {
    left: 12.5em;
    top: -1px;
    width: 12.5em;
}
ul.nice-menu-right ul ul {
    left: 12.5em;
    top: -1px;
    width: 12.5em;
}
ul.nice-menu-right li.menuparent, ul.nice-menu-right li li.menuparent {
    background: url("../images/arrow-right.png") no-repeat scroll right center #FFD700;
}
ul.nice-menu-right li.menuparent:hover, ul.nice-menu-right li li.menuparent:hover {
    background: url("../images/arrow-right.png") no-repeat scroll right center #CCCCCC;
}
ul.nice-menu-left li ul {
    left: -12.65em;
    top: -1px;
    width: 12.5em;
}
ul.nice-menu-left li ul li ul {
    left: -12.65em;
    top: -1px;
    width: 12.5em;
}
ul.nice-menu-left li.menuparent, ul.nice-menu-left li li.menuparent {
    background: url("../images/arrow-left.png") no-repeat scroll left center #FFD700;
}
ul.nice-menu-left li.menuparent:hover, ul.nice-menu-left li li.menuparent:hover {
    background: url("../images/arrow-left.png") no-repeat scroll left center #CCCCCC;
}
ul.nice-menu-left a, ul.nice-menu-left ul a {
    padding-left: 14px;
}


ul.nice-menu li.over ul {visibility: visible;}

ul.nice-menu li:hover ul, ul.nice-menu li.enuparent li:hover ul, ul.nice-menu li.menuparent li.menuparent li:hover ul, ul.nice-menu li.menuparent li.menuparent li.menuparent li:hover ul, ul.nice-menu li.over ul, ul.nice-menu li.menuparent li.over ul, ul.nice-menu li.menuparent li.menuparent li.over ul, ul.nice-menu li.menuparent li.menuparent li.menuparent li.over ul, #header-region ul.nice-menu li:hover ul, #header-region ul.nice-menu li.menuparent li:hover ul, #header-region ul.nice-menu li.menuparent li.menuparent li:hover ul, #header-region ul.nice-menu li.over ul, #header-region ul.nice-menu li.menuparent li.over ul, #header-region ul.nice-menu li.menuparent li.menuparent li.over ul
{visibility: visible;}

ul.nice-menu li:hover ul ul, ul.nice-menu li:hover ul ul ul, ul.nice-menu li:hover li:hover ul ul, ul.nice-menu li:hover li:hover ul ul ul, ul.nice-menu li:hover li:hover li:hover ul ul, ul.nice-menu li:hover li:hover li:hover ul ul ul, ul.nice-menu li.over ul ul, ul.nice-menu li.over ul ul ul, ul.nice-menu li.over li.over ul ul, ul.nice-menu li.over li.over ul ul ul, ul.nice-menu li.over li.over li.over ul ul, ul.nice-menu li.over li.over li.over ul ul ul, #header-region ul.nice-menu li:hover ul ul, #header-region ul.nice-menu li:hover ul ul ul, #header-region ul.nice-menu li:hover li:hover ul ul, #header-region ul.nice-menu li:hover li:hover ul ul ul, #header-region ul.nice-menu li:hover li:hover li:hover ul ul, #header-region ul.nice-menu li:hover li:hover li:hover ul ul ul, #header-region ul.nice-menu li.over ul ul, #header-region ul.nice-menu li.over ul ul ul, #header-region ul.nice-menu li.over li.over ul ul, #header-region ul.nice-menu li.over li.over ul ul ul, #header-region ul.nice-menu li.over li.over li.over ul ul, #header-region ul.nice-menu li.over li.over li.over ul ul ul
{visibility: hidden;}

ul.nice-menu li.menuparent ul iframe, #header-region ul.nice-menu li.menuparent ul iframe
{display: block; left: 0; position: absolute; top: 0; z-index: -1;}

/******************************
 VERTICAL (left/right) menus
******************************/

/* This is the default width of all vertical menus. */
ul.nice-menu-right,
ul.nice-menu-left,
ul.nice-menu-right li,
ul.nice-menu-left li {
  width: 12.5em;
}

/* VERTICAL menus where submenus pop RIGHT (default). */
ul.nice-menu-right ul {
  width: 12.5em;
  left: 12.5em;
  top: -1px;
}

ul.nice-menu-right ul ul {
  width: 12.5em;
  left: 12.5em;
  top: -1px;
}

ul.nice-menu-right li.menuparent,
ul.nice-menu-right li li.menuparent {
  background: #fff url("../images/arrow-right.png") right center no-repeat;
}

ul.nice-menu-right li.menuparent:hover,
ul.nice-menu-right li li.menuparent:hover {
  background: #ccc url("../images/arrow-right.png") right center no-repeat;
}

/* VERTICAL menus where submenus pop LEFT. */
ul.nice-menu-left li ul {
  width: 12.5em;
  left: -12.65em;
  top: -1px;
}

ul.nice-menu-left li ul li ul {
  width: 12.5em;
  left: -12.65em;
  top: -1px;
}

ul.nice-menu-left li.menuparent,
ul.nice-menu-left li li.menuparent {
  background: #fff url("../images/arrow-left.png") left center no-repeat;
}

ul.nice-menu-left li.menuparent:hover,
ul.nice-menu-left li li.menuparent:hover {
  background: #ccc url("../images/arrow-left.png") left center no-repeat;
}

ul.nice-menu-left a,
ul.nice-menu-left ul a {
  padding-left: 14px;
}

/******************************
 HORIZONTAL (down) menus
******************************/

ul.nice-menu-down {
  /* float: left; /* LTR */ */
  border: 0;
  float: left;
  }

ul.nice-menu-down li {
  border-top: 1px solid #ccc;
}

ul.nice-menu-down li li
{
	border-bottom: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
}

ul.nice-menu-down ul {
  left: 0; /* LTR */
   /* z-index: 100; MQ */
}

ul.nice-menu-down ul li {
  clear: both;
  /* z-index: 100; MQ */
}

ul.nice-menu-down li ul li ul {
  /* left: 12.5em; /* LTR */
  top: -1px;
}

ul.nice-menu-down .menuparent a {
  /* padding-right: 15px;
  background: none;
  padding: 64px 13px 5px 1.3em;
  color: #684C8D;
  display: block; 
  transition: all 100ms linear 0s;*/
}

ul.nice-menu-down li.menuparent {
	background: transparent;
  /* background: #eee url("../images/arrow-down.png") right center no-repeat;*/ /* LTR */
}

ul.nice-menu-down li.menuparent:hover {
  /* background: #ccc url("../images/arrow-down.png") right center no-repeat;*/ /* LTR */
  background: transparent;
}

ul.nice-menu-down li li.menuparent {
  /* background: #eee url("../images/arrow-right.png") right center no-repeat;*/ /* LTR */
  background: transparent;
}

ul.nice-menu-down li li.menuparent:hover {
  /* background: #ccc url("../images/arrow-right.png") right center no-repeat;*/ /* LTR */
  background: transparent;
}

/******************************
 Garland-specific CSS
******************************/

/**
 * Global CSS for ALL menu types
 */
ul.nice-menu li {
  margin: 0;
  padding-left: 0; /* LTR */
}

#header-region ul.nice-menu li {
    background: none repeat scroll 0 0 #FFD700;
    margin: 0;
    padding-bottom: 0.1em;
    padding-top: 0.1em;
}
#header-region ul.nice-menu ul {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #CCCCCC -moz-use-text-color -moz-use-text-color;
    border-image: none;
    border-right: 0 none;
    border-style: solid none none;
    border-width: 1px 0 0;
    left: -1px;
    margin-right: 0;
    top: 1.8em;
}
#header-region ul.nice-menu ul {
    top: 1.7em;
}
#header-region ul.nice-menu-down li ul li ul {
    /* left: 12.5em; */
    top: -1px;

#header-region ul.nice-menu-down li.menuparent {
  background: #eee url("../images/arrow-down.png") right center no-repeat; /* LTR */
}

#header-region ul.nice-menu-down li.menuparent:hover {
  background: #ccc url("../images/arrow-down.png") right center no-repeat; /* LTR */
}

#header-region ul.nice-menu-down li li.menuparent {
  background: #eee url("../images/arrow-right.png") right center no-repeat; /* LTR */
}

#header-region ul.nice-menu-down li li.menuparent:hover {
  background: #ccc url("../images/arrow-right.png") right center no-repeat; /* LTR */
}


ul.main-menu .menu-423 a {
	color: #4A4453;
	cursor: pointer;
	display: block;
	font: 300 18px/34px Oswald,sans-serif;
	padding: 0;
}

ul.nice-menu .menu-423>li>a,
ul.nice-menu .menu-423>li>span {display: block; padding: 0; color: #4a4453; font: 300 18px/34px Oswald, sans-serif; cursor: pointer; position: static;}
ul.nice-menu .menu-423>li>a,
ul.nice-menu .menu-423>li>span {
	-webkit-transition: all 100ms linear;
    -moz-transition: all 100ms linear;
    -o-transition: all 100ms linear;
    transition: all 100ms linear;
    
.nice-menu-0
{
	position: relative;
}

.view-gallery
{
	position: static;
	overflow: hidden;
}









ul#nice-menu-0
{
	font-size: 100%;
	font-weight: bold;
	position: relative;
	z-index: 1100;
}

ul#nice-menu-0 li
{
	display: inline;
	margin: 0;
	padding: 0;
}

ul#nice-menu-0 a
{
	display: block;
	float: left;
	margin: 0;
	padding: 0 8px;
}

ul#nice-menu-1 ul
{
	border-width: 1px 1px 8px;
	list-style: none outside none;
	margin: 6px 0 0 -1px;
	padding: 0;
}

ul#nice-menu-1 .menuparent li
{
	font-size: 90%;
	width: 196px;
}

div#mainmenu, #nice-menu-1, #nice-menu-1 li
{
	height: 30px;
	line-height: 30px;
}

ul#nice-menu-1 .menuparent li a, ul#nice-menu-1 .menuparent li a:hover, ul#nice-menu-1 .menuparent li a.active
{
	padding: 0 8px;
	width: 180px;
}

ul.nice-menu ul li a
{
	display: block;
	padding: 5px 0 5px 8px;
	width: 14em;
}
CommentFileSizeAuthor
hover-after.JPG25.36 KBmichaelquinlan
hover-before.JPG32.16 KBmichaelquinlan
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

xiukun.zhou’s picture

xiukun.zhou CreditAttribution: xiukun.zhou commented
Category: task » support
Status: Active » Needs review

try:

/* VERTICAL menus where submenus pop LEFT. */
ul.nice-menu-left li ul {
  width: 12.5em;
  left: -12.65em;
  top: -1px;
  z-index:999px;
}
azlemck’s picture

azlemck CreditAttribution: azlemck commented

I resolved a similar issue. My 'nice-menu' dropdown would work fine on the rest of my site, but disappear on a views-slideshow on the home page.
my solution was to open "../sites/all/modules/nice_menus/css/nice_menus.css" and modify (what is line 17 in my file) the z-index to be 25. The default was 5, I think:
ul.nice-menu,
ul.nice-menu ul {
z-index: 25;
position: relative;
}

xiukun.zhou’s picture

xiukun.zhou CreditAttribution: xiukun.zhou commented
Issue summary: View changes
Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.