Css Navbar - <A> Element Needs Clearing

[Mark H]

Hi all, It's been a while since I've been here: like the new forum style! To my question, as this has been giving me a headache today! I have done a horizontal nav bar, using a display: block for the <a> elements, which is working fine. However, the drop-down menus are not behaving correctly. They are out of position, yet I believe I have narrowed the problem down to the <a> elements. I am using a text link on the drop-down menu (no width or height, no border, and inline) yet they don't seem to be taking any notice of my extra CSS. Is there a simple way to clear the CSS styling for the <a> elements after they have dealt with the topLevel block element? Can I use a <span> on this? Any help appreciated! EDIT: You can see my current progress at: http://www.rabel.org.uk/tests/test-oct-2011.html Mark.

[dsonesuk]

By default the unordered list tag ul has a padding on the left, that why the parent ul is the same distance from the left edge of it parent container div#nav as the child ul is from the parent li, set nestedList to zero padding, and you may want to zero text-indent for IE browsers

.nestedList {	display: none;	font-size: 12px;	left: 30px; /*may need adjust to your requirement, but i would set it to 0px to line up to left li edge*/	line-height: 12px;	list-style-type: none;	padding: 0;	position: absolute;	top: 40px;	width: 0;	z-index: 99;text-indent:0;}

[Mark H]

Thanks dsonesuk, Actually that wasn't the problem, but thanks for the hints I am sure they will come in useful. I have corrected a whole load of stuff and the main problem I was having was the drop-down menu not centering the text. I realised I had a float: left on them. :blush Also, I have had a problem with the hover background colour. I wanted it on the top level but not the dropdowns. I have found a work-around by setting a background image, but is there any way of clearing a colour? i.e. make it transparent? Thanks alot and bless you.Mark.

[Ingolme]

For very new browsers, you can set the color in RGBA format (red, green, blue, alpha). I don't know how well supported it is. For example:background-color: rgba(255,255,255,0.2); You can use the child selector to target just children and not all descendents:

ul > li {  /* Some style here */}

This isn't supported in Internet Explorer 6, but the less support that browser gets the more people will move to a better browser.

[dsonesuk]

This will clear all background images, and background colours, from beyond the parent level, when placed at bottom of css style sheet, adjust it by resetting the element background again below it. #main ul.nestedList li, #main ul.nestedList li a:hover, #main ul.nestedList li a:link, #main ul.nestedList li a:visited, #main ul.nestedList li a:active { background: none repeat scroll 0 0 transparent;}

[Mark H]

Thank you for your help guys. Ingolme: as I want to reset the colours for the child elements it was the background: transparent; attribute that I didn't realise existed! Dsonesuk: I am presuming that I can use the transparent value for any background attribute? Say, background-color: transparent; ? Then I could just add it to the elements/classes I want to add it to. Thanks.

[Mark H]

Ingolme:

This isn't supported in Internet Explorer 6, but the less support that browser gets the more people will move to a better browser.

I long ago gave up trying to accommodate IE6. I have enough trouble with 7-9! Mark.

[dsonesuk]

Mark H, on 10 October 2011 - 08:52 PM, said: Dsonesuk: I am presuming that I can use the transparent value for any background attribute? Say, background-color: transparent; ? Then I could just add it to the elements/classes I want to add it to.

If thats a question, then the answer is yes, transparent is perfectly valid for using in background-color: and also border-color, but note setting transparent border won't work for IE6 and below.

[Mark H]

Thanks Dsonesuk, Yes, it was a question and thank you for your answer. I have adjusted what was needed and almost all is fine. I will start a new thread for the remaining problem as it's a different topic. Thanks,Mark.