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
306 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
Comment Utility
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
Comment Utility
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
Comment Utility
Thank you, I have been banging away at this for hours!!!
0
 
LVL 7

Expert Comment

by:DanielleFavreau
Comment Utility
You're welcome.  Glad I could help.
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

772 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now