Solved

Where do I get rid of the border  in a CSS nested unordered list in Drupal Nice Menu

Posted on 2011-09-26
4
316 Views
Last Modified: 2012-05-12
I am working on a Drupal  7 site, and I have created the main navigation with drop down menus using nice menus.On the drop down menus, the borders seem to be doubled or something, they are much too big. You can see it here:
http://www.biennainternational.com/
I can't seem to figure out which element to change to fix this. I have set the border to zero on several things, but nothing has worked. The CSS so far is below, but maybe that is not where the problem is?
I know Drupal is a zone, but I can't find it in the list of zones, even after searching for it.
/*
  This file contains the basic logic for nice menus, and should not be
  edited.  To customize the menus, it's recommended to create a custom CSS
  file using nice_menus_default.css 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.)
*/

/* Below should fix menu being a few pixels away in some themes, and menus disappearing behind other stuff. */
.block-nice-menus {
  line-height: normal;
  z-index: 10;
}

ul.nice-menu,
ul.nice-menu ul {
  z-index: 5;
  position: relative;
}

ul.nice-menu li {
  position: relative;
}

ul.nice-menu a {
  display: block;
  /*Default to Blue, but override as necessary*/
  color: #FFFFFF;
}

ul.nice-menu ul,
/* For Garland header. */
#header-region ul.nice-menu ul {
  position: absolute;
  visibility: hidden;
}

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

ul.nice-menu ul li {
  display: block;
  padding:2px;
}

ul.nice-menu:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* Show submenus when over their parents. */
ul.nice-menu li:hover ul,
ul.nice-menu li.menuparent 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,
/* Repeat all this stuff just for Garland headers. */
#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;
}

/* Hide sub-menus initially. */
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,
/* Repeat all this stuff just for Garland headers. */
#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;
}

/***************
 IE 6 Fixes
***************/

/* Iframe to fix z-index bug when menu hovers over <select> fields. */
ul.nice-menu li.menuparent ul,
/* For Garland header. */
#header-region ul.nice-menu li.menuparent ul {
	overflow: visible !important;
	/* overflow: hidden; */
}

ul.nice-menu li.menuparent ul iframe,
/* For Garland header. */
#header-region ul.nice-menu li.menuparent ul iframe {
	display: none;
	display/**/: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	filter: mask();
	width: 20px;
	height: 20px;
}

/* CUSTOM ADDITIONS TO THE NICE MENU*/

/*Get rid of the borders and background colour for all top-level menu items*/

  ul.nice-menu,
  ul.nice-menu ul,
  ul.nice-menu li {
    /*border: thin;
	border-color: #424D57;*/
	border:0;
     
	font-size:13px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	text-decoration:none;
	padding:0px;
	border:0;
  }
  
  #nice-menu-1 {
	  margin:0;
	  width:945px;
	  background-color:tranparent;

	
  }
    ul.nice-menu  li a:link {
    color: white; 
    background: #424D57;
	font-size:15px;	
	border:0;
	
  }  
  
/*Make hovered links white with a gray background:*/

  ul.nice-menu li a:hover { 
    color: white; 
    background: #697E90;
	text-decoration:none;
  }

/*Make the link to the current page that you're on black with yellow text: */

  ul.nice-menu li a.active {
    color: white; 
    background: #697E90;
	font-size:15px;
  }
  
  ul.nice-menu li.menuparent li a:link {
    color: white; 
    background: #424D57;
	border:0;
	font-size:15px;
  }
  
/*Drop down link styling*/

   ul.nice-menu li.menuparent li a  {
    color: white; 
    background: #424D57;
    border:0;
	font-size:15px;	
  } 

  ul.nice-menu li.menuparent li a:hover  { 
    color: white; 
    background: #697E90;
	border:0;
	text-decoration:none;
  }
  
  ul.nice-menu li.menuparent li a:active {
    color: white; 
    background: #697E90;
	border:0;
	font-size:15px;
  }
    ul#nice-menu li li a:link {
	  border:0;
  }
  

  ul.nice-menu li {
	  border:0;
	  width:14%;
  }

Open in new window

0
Comment
Question by:nanharbison
  • 2
4 Comments
 
LVL 42

Assisted Solution

by:David S.
David S. earned 50 total points
ID: 36604377
The "borders" are controlled by the padding applied to "ul.nice-menu ul li".
0
 
LVL 7

Accepted Solution

by:
DanielleFavreau earned 450 total points
ID: 36617782
You actually have two things going on - padding, which is making it so you have a light grey thick "border" (not really a border but it looks like one to you), which is controlled by ul.nice-menu li, and then that same control gives it an actual border of a darker grey:

ul.nice-menu li {
border: 1px solid #CCC; [[ This is the thin dark grey real border, you want this. ]]
border-top: 0;
float: left;
background-color: #EEE; [[ This is the thick light grey "border" not really a border but it looks like one, you want to get rid of this - but you don't delete this to do that, read on. ]]
}

When you add in the following:

ul.nice-menu ul li {
display: block;
padding: 2px;
}

That makes it so you add a 2 pixel thick space, which is filled in by the "background-color: #EEE;" shown at the top of this answer.

Change the padding: 2px; to padding: 0px; and that will fix your issue.
0
 
LVL 17

Author Closing Comment

by:nanharbison
ID: 36642364
Thank you, I have been banging away at this for hours!!!
0
 
LVL 7

Expert Comment

by:DanielleFavreau
ID: 36661080
You're welcome.  Glad I could help.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This script checks a path to see if a folder exists. If the folder does exist you will get output "The folder has previously been created. No action taken" If not it will create the folder. Then adds one user modify permission to the folder. It …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

680 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question