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
324 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
A big percent of today’s marketing activity is performed through the online environment. The marketing strategies that have existed a decade ago no longer relate to what’s happening today. We’re currently facing a revolutionary era, called the digit…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

717 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