[Stanza]

Hi guys,

I hope you can help. I'm currently working on a CSS vertical drop down menu (<ul> nested into a main navigation bar's <li> elements) I'm having difficulty getting the the nested menu's width to automatically fit it's own content instead of inheriting width values from it's parent (man nav bar). I also ant to avoid fixing the width as the content of the nested menu is likely to change from time to time.

<nav>
                <ul>
                    <li><a href="#">Main Nav Item 1</a></li>
                    <li><a href="#">Main Nav Item 2</a>
                    	<ul>
                            <li><a href="#">Drop Down Menu Item 1</a></li>
                            <li><a href="#">Drop Down Menu Item 2</a></li>
                            <li><a href="#">Drop Down Menu Item 3</a></li>
                            <li><a href="#">Drop Down Menu Item 4</a></li>
                            <li><a href="#">Drop Down Menu Item 5</a></li>
                            <li><a href="#">Drop Down Menu Item 6</a></li>
                            <li><a href="#">Drop Down Menu Item 7</a></li>
                            <li><a href="#">Drop Down Menu Item 8</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Main Nav Item 3</a>
                    	<ul>
                            <li><a href="#">Drop Down Menu Item 1</a></li>
                            <li><a href="#">Drop Down Menu Item 2</a></li>
                            <li><a href="#">Drop Down Menu Item 3</a></li>
                            <li><a href="#">Drop Down Menu Item 4</a></li>
                            <li><a href="#">Drop Down Menu Item 5</a></li>
                            <li><a href="#">Drop Down Menu Item 6</a></li>
                            <li><a href="#">Drop Down Menu Item 7</a></li>
                            <li><a href="#">Drop Down Menu Item 8</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Main Nav Item 4</a></li>
                    <li><a href="#">Main Nav Item 5</a></li>
                    <li><a href="#">Main Nav Item 6</a></li>
                    <li><a href="#">Main Nav Item 7</a></li>
                </ul>
            </nav>

and the css

header nav {
	background-image: url(../_images/nav-bar-bg.png);
	height: 48px;
	width: 960px;
	position: absolute;
	top: 96px;
}

header nav ul {
	height: 48px;
	width: 960px;
}

header nav ul li {
	float: left;
	position: relative;
	line-height: 48px;
	font-size: 1.6em;
	width: auto;
	margin-right: 30px;
	margin-left: 30px;
}

header nav ul li a {
	text-align:center;
	color: #FFF;
	display:block;
}

header nav ul li a:hover {
	color: #09b497;
}

header nav ul ul  {
	position:absolute;
	visibility: hidden;
	top:48px;
	height:auto;
	border:2px solid #0a7c6c;
	background-color:#FFF;
}

header nav ul li:hover ul  {
	visibility: visible;
	
}

header nav ul li:hover ul li {
	margin:0 0px;
	padding: 0 6px;
	display:block;
	float:left;
	clear:left;
}

header nav ul li:hover ul li a{
	display:block;
	line-height:24px;
	text-align:center;
	font-size:14px;
	color:#0a7c6c;
	background-color:#F00;
}

This post has been edited by Stanza: 20 January 2012 - 03:26 PM

[Renaissance-Design]

header nav>ul {
	height: 48px;
	width: 960px;
}

[Stanza]

Renaissance-Design, on 20 January 2012 - 03:41 PM, said:

header nav>ul {
	height: 48px;
	width: 960px;
}

That's setting the width of the main nav horizontal bar which is required, and to my understanding, this is where the nested <ul> is getting it's width from, but I don't want it to. I want it to adjust to the width of it's own <li> content. or have I completely missed the mark? [insert confused face here]

[Renaissance-Design]

nav ul - applies to any <ul> that's a descendant of <nav>.
nav>ul - only applies to a <ul> that's an immediate child of <nav> - so grandchildren won't inherit the width value.

[Stanza]

Renaissance-Design, on 20 January 2012 - 03:47 PM, said:

nav ul - applies to any <ul> that's a descendant of <nav>.
nav>ul - only applies to a <ul> that's an immediate child of <nav> - so grandchildren won't inherit the width value.

Thank you! Sorry for my ignorance.

Now I've done that, it works to an extent, but for some reason the nested <li> items don't seem to expand to fit their content on 1 line and instead breaks up the content over a number of lines? so for example, instead of appearing as:

Drop Down Menu Item 1

it appears as

Drop
Down
Menu
Item
1

This post has been edited by Stanza: 20 January 2012 - 04:00 PM

[Renaissance-Design]

D'you have it live anywhere? If not, could you copy it to a JSFiddle?

[Renaissance-Design]

Lose position: relative from your top-level <li>. Also, I've hidden your post so your unfinished work isn't hanging out in the breeze.

This post has been edited by Renaissance-Design: 20 January 2012 - 04:33 PM

[Stanza]

Renaissance-Design, on 20 January 2012 - 04:32 PM, said:

Lose position: relative from your top-level <li>. Also, I've hidden your post so your unfinished work isn't hanging out in the breeze.

nailed it! Thank you.

I will buy you a beer

[Renaissance-Design]

Very kind of you, squire.

[Stanza]

I've noticed that the width problem still persists in Safari and on Chrome I assume it's ignoring the Nav > UL command perhaps?

[Renaissance-Design]

nav ul ul {
float: left;
}

Should fix it.

[Stanza]

Renaissance-Design, on 23 January 2012 - 11:51 AM, said:

nav ul ul {
float: left;
}

Should fix it.

legend, once again. thanks