Jump to content
cpugeek

CSS Issue: Dropdown Menu: Vertically Stack List Items

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?

Share this post


Link to post
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;}

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

I wouldn't copy CSS from firebug. At times it adds some extra properties that only belong to the browser.

Share this post


Link to post
Share on other sites
I wouldn't copy CSS from firebug. At times it adds some extra properties that only belong to the browser.
Actually it only does this, when you accidentally choose Style -> Expand Shorthand Properties, instead of active and hover. :-)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...