3 Replies - 2901 Views - Last Post: 19 March 2013 - 07:33 PM

#1 xuany  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 23
  • Joined: 03-March 10

drop down menu ruin the size of the page

Posted 19 March 2013 - 12:01 AM

Hello all,
my colleague had put the drop down menu in the website, but then it expand the width of the site, and the drop down menu become 2 lines. can anyone help me how do i change the css in order for the drop down to stay fix at the size and won't expand according to the resolution of the website.
this the css code for the drop down menu, and my site is at http://jknsarawak.moh.gov.my. Please help.
thank you.
@charset "UTF-8";

/** 
 * Vimeo.com CSS Drop-Down Menu Theme
 *
 * @file		default.css
 * @name		Vimeo
 * @version		beta
 * @type		transitional
 * @browsers	Windows: IE5+, Opera9+, Firefox1+
 *				Mac OS: Safari2+, Firefox2+
 *
 * @link		http://www.lwis.net/
 * @copyright	2009 Live Web Institute. All Rights Reserved.
 *
 */


/*-------------------------------------------------/
 * @section		Base Drop-Down Styling
 */


ul.dropdown {
 background: transparent url(images/box1-bottom-left.png) 0 100% no-repeat;
 font: normal 12.5px/normal Tahoma, Verdana, Arial, Helvetica, sans-serif;
 left: 2px;				/* -- modified -- */
   
}

	ul.dropdown li {
	 padding: 5px 6px;
	 background-color: #172322;
	 color: #fff;
	 line-height: 22px;
	 white-space: nowrap;
	}

	ul.dropdown li.first {
	 padding-left: 110px;
	 background: transparent url(images/box1-bottom2.png) 0 100% no-repeat;
	}
	
	ul.dropdown li.last {
	 padding-right: 120px;
	 background: transparent url(images/box1-bottom2.png) 100% 100% no-repeat;
	}

	ul.dropdown li.hover,
	ul.dropdown li:hover {
	 color: #b0d730;
	}

	ul.dropdown a:link,
	ul.dropdown a:visited	{ color: #fff; text-decoration: none; }
	ul.dropdown a:hover		{ color: #b0d730; }
	ul.dropdown a:active	{ color: #0395cc; }


	/* -- level mark -- */

	ul.dropdown ul {
	 left: -21px;
	 width: 210px;       	/* -- modified -- */
	 padding: 0 16px;

	}

	ul.dropdown li.last ul {
	 left: auto;
	 right: 16px;
	}

		ul.dropdown ul li {
		 height: auto;
		 padding: 5px 15px;
		 line-height: 1.3em;
		 white-space: normal;
		}

		ul.dropdown ul li.first {
		 padding-left: 10px;
		 background: #172322;
		 opacity: 0.8;
		}

		ul.dropdown ul li.last {
		 padding-left: 10px;			/* -- modified -- */
		 opacity: 0.8;
		}

		ul.dropdown ul li.first ul {
		 top: 0;
		 padding: 0 16px 0 0;
		 background-image: url(images/box1-outwards-top-right.png);
		}

		ul.dropdown ul li.first li.first {
		 background-image: none;
		}

		ul.dropdown ul li.last ul {
		 left: 100%;
		 right: auto;
		 top: -16px;
		}

		/* -- level mark -- */

		ul.dropdown ul ul {
		 top: -12px;
		 left: 100%;
		 padding: 16px 0 0;
		 background: transparent url(images/box1-top-left.png) 0 0 no-repeat;
		}

			ul.dropdown ul ul li.first {
			 padding-top: 10px;
			 background: #172322 url(images/box1-top-right.png) 100% 0 no-repeat;
			}


/*-------------------------------------------------/
 * @section		Support Class `dir`
 */





Is This A Good Question/Topic? 0
  • +

Replies To: drop down menu ruin the size of the page

#2 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 167
  • Joined: 12-November 12

Re: drop down menu ruin the size of the page

Posted 19 March 2013 - 11:09 AM

It looks like the menu is working fine from Chrome. I didn't check IE or Firefox. I did a quick google search for the menu template you are using and found the original css (version 8 not beta).
@charset "UTF-8";

/**
 * Horizontal CSS Drop-Down Menu Module
 *
 * @file		dropdown.css
 * @package		Dropdown
 * @version		0.8
 * @type		Transitional
 * @stacks		597-599
 * @browsers	Windows: IE6+, Opera7+, Firefox3+
 *				Mac OS: Safari2+, Firefox3+
 *
 * @link		http://www.lwis.net/free-css-drop-down-menu
 * @copyright	2008-2012 Live Web Initiatives, http://www.lwis.net, http://www.lwis.net
 *
 */

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;
}

ul.dropdown li {
 float: left;
 min-height: 1px;
 line-height: 1.3em;
 vertical-align: middle;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul.dropdown ul li {
 float: none;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}

ul.dropdown li:hover > ul {
 visibility: visible;
}


Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3223
  • View blog
  • Posts: 10,810
  • Joined: 12-December 12

Re: drop down menu ruin the size of the page

Posted 19 March 2013 - 11:54 AM

You could increase the min-width of your table (id, header) to 1120px.
Was This Post Helpful? 0
  • +
  • -

#4 xuany  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 23
  • Joined: 03-March 10

Re: drop down menu ruin the size of the page

Posted 19 March 2013 - 07:33 PM

the menu bar is working fine. but when the resolution of the pc is different, then the layout of the site is changed.
the site is working fine 1280x800, with the banner and menu bar fix in one line.
but if you change the resolution to higher, the banner start to shrink.
and if change to lower resolution, e.g 1024x786, the menu bar become two lines, and the banner is too long, and half of the banner is gone.

so how can adjust so that my website look the same at whatever resolution.

thanks for helping..
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1