cpugeek Posted February 8, 2013 Share Posted February 8, 2013 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 More sharing options...
dsonesuk Posted February 8, 2013 Share Posted February 8, 2013 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 More sharing options...
callumacrae Posted February 9, 2013 Share Posted February 9, 2013 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 More sharing options...
dsonesuk Posted February 9, 2013 Share Posted February 9, 2013 (edited) 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 February 9, 2013 by dsonesuk Link to comment Share on other sites More sharing options...
callumacrae Posted February 10, 2013 Share Posted February 10, 2013 -moz-text-blink: none; Irrelevant and confusing. It's not in the OPs original code. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 10, 2013 Share Posted February 10, 2013 I got the code directly from firebug from his site, IT places that code NOT me! that why i highlight the changes i made, arsehole. Link to comment Share on other sites More sharing options...
Ingolme Posted February 10, 2013 Share Posted February 10, 2013 I wouldn't copy CSS from firebug. At times it adds some extra properties that only belong to the browser. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 10, 2013 Share Posted February 10, 2013 OH Well, good for you! Link to comment Share on other sites More sharing options...
dsonesuk Posted February 18, 2013 Share Posted February 18, 2013 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. :-) Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now