Jump to content

CSS Issue: Dropdown Menu: Vertically Stack List Items


cpugeek

Recommended Posts

I'm trying to create a dropdown menu effect here http://cbd-alpha.com/ideal/But I'm stuck with how to get the menu items under the "about" menu item to stack vertically like a standard dropdown. Here's the CSS:

#mainNav {	margin: 82px 0 0 160px;}#mainNav ul {list-style-type: none;padding-top: 8px;}#mainNav li {	float: left;	padding-left: 21px;}#mainNav li:first-child {	padding-left: 80px;	background: none;}#mainNav a {	text-decoration: none;	padding: 0px 10px;	font: normal 14px "ITCAvantGarde", Helvetica, Arial, sans-serif;	color: #FFF;}#mainNav ul ul {	display: none;}#mainNav ul ul li {	padding-left: 0 !important;	z-index: 999 !important;}#mainNav ul ul ul {	}#mainNav ul ul a {	}#mainNav li:hover > a,#mainNav ul ul :hover > a {	color: #afc2d1;}#mainNav ul ul a:hover {	}#mainNav ul li:hover > ul {	display: block;}

And here's the css of a similar menu:

	#mainNav {		margin: 0 auto;		position: relative;		width: 1000px;		z-index: 101;	}	#mainNav ul {		border-left: 1px solid #CCCCCC;		border-right: 1px solid #FFFFFF;		float: left;		height: 37px;		list-style: none outside none;		margin: 0 auto;		padding-left: 0;		position: relative;		z-index: 100;	}	#mainNav li {		border-left: 1px solid #FFFFFF;		border-right: 1px solid #CCCCCC;		float: left;		position: relative;	}	#mainNav a {		color: #8D8C8C;		display: block;		font: 18px/38px "GothamBoldRegular",Helvetica,Arial,sans-serif;		height: 37px;		padding: 0 11px;		text-decoration: none;		text-transform: uppercase;	}	#mainNav ul ul {		border: medium none;		display: none;		float: left;		left: 0;		position: absolute;		top: 38px;		width: 260px;		z-index: 99;	}	#mainNav ul ul li {		background: url("images/nav_bg_hover.png") repeat scroll 0 0 transparent;		border: medium none !important;		float: none;		padding: 0 !important;	}	#mainNav ul ul ul {		left: 100%;		top: 0;	}	#mainNav ul ul a {		background-image: none !important;		border-bottom: 1px dotted #FFFFFF;		color: #FFFFFF;		font-weight: normal;		height: auto;		line-height: normal;		overflow: hidden;		padding: 10px !important;		position: relative;		text-transform: capitalize;		width: 240px;		z-index: 99;	}	#mainNav li:hover {		color: #6A99C8;	}	#mainNav li:hover {		background: url("images/nav_a_hover.jpg") repeat-x scroll center bottom transparent;	}	#mainNav li:hover li {		color: #FFFFFF;	}	#mainNav ul ul li:hover a {		background: url("images/nav_bg_hover.png") repeat scroll 0 0 #56A1D5 !important;	}	#mainNav ul li:hover > ul {		display: block;	}

How do I stack them vertically?

Link to comment
Share on other sites

you need css similar to this, submenu UL set to position: absolute; and add a fixed width. With the LI you should remove padding and give it 100% width to stretch full width of UL, causing it to stake, make anchor elements block, and also 100% width.

#mainNav li {    float: left;    /*padding-left: 21px;*/}#mainNav a {    -moz-font-feature-settings: normal;    -moz-font-language-override: normal;    -moz-text-blink: none;    -moz-text-decoration-color: -moz-use-text-color;    -moz-text-decoration-line: none;    -moz-text-decoration-style: solid;    -x-system-font: none;    color: #FFFFFF;    display: block; /*added by dsonesuk*/    font-family: "ITCAvantGarde",Helvetica,Arial,sans-serif;    font-size: 14px;    font-size-adjust: none;    font-stretch: normal;    font-style: normal;    font-variant: normal;    font-weight: normal;    line-height: normal;    padding-bottom: 0;    padding-left: 20px;  /* padding-left: 10px; amended by dsonesuk*/    padding-right: 20px; /*padding-right: 10px; amended by dsonesuk*/    padding-top: 0;    width: 100%; /*added by dsonesuk*/}#mainNav ul ul {    display: none;    width: 300px; /*added by dsonesuk*/position:absolute;  /*added by dsonesuk*/}#mainNav ul ul li {    padding-left: 0 !important;    width: 100%; /*added by dsonesuk*/    z-index: 999 !important;}

Link to comment
Share on other sites

you need css similar to this, submenu UL set to position: absolute; and add a fixed width. With the LI you should remove padding and give it 100% width to stretch full width of UL, causing it to stake, make anchor elements block, and also 100% width.
#mainNav li {	float: left;	/*padding-left: 21px;*/} #mainNav a {	-moz-font-feature-settings: normal;	-moz-font-language-override: normal;	-moz-text-blink: none;	-moz-text-decoration-color: -moz-use-text-color;	-moz-text-decoration-line: none;	-moz-text-decoration-style: solid;	-x-system-font: none;	color: #FFFFFF;	display: block; /*added by dsonesuk*/	font-family: "ITCAvantGarde",Helvetica,Arial,sans-serif;	font-size: 14px;	font-size-adjust: none;	font-stretch: normal;	font-style: normal;	font-variant: normal;	font-weight: normal;	line-height: normal;	padding-bottom: 0;	padding-left: 20px;  /* padding-left: 10px; amended by dsonesuk*/	padding-right: 20px; /*padding-right: 10px; amended by dsonesuk*/	padding-top: 0;	width: 100%; /*added by dsonesuk*/} #mainNav ul ul {	display: none;	width: 300px; /*added by dsonesuk*/position:absolute;  /*added by dsonesuk*/} #mainNav ul ul li {	padding-left: 0 !important;	width: 100%; /*added by dsonesuk*/	z-index: 999 !important;}

Wow, seriously? Either answer OPs question properly, or don't answer it at all. Providing a long sample of code with a lot of irrelevant chunks will not help the OP, it will only confuse him or her.
Link to comment
Share on other sites

WOW seriously you are turning out to be a complete and utter arse hole aren't you, you an English guy like me. I supplied their code with adjustment required, never had any problems before, just seem you are only arse hole with anal problem having problem.

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...