CSS drop-down menu displays inline when not told to

This site is best viewed in a modern browser with JavaScript enabled.

CSS drop-down menu displays inline when not told to

ShamanS08

Here is a JSfiddle of my project: http://jsfiddle.net/yPHPW/

WHy are the <li> elements of the submenu displaying in line and not underneath each other? Also how do I remove the little indent from the left?

ShrineDesigns

for #navbar ul I suggest using absolute instead of relative, with relative it will affect the content under the navbar.
add #navbar ul ul li and set the float to none, this is what is causing them to stack horizontally instead of vertically.

/* ... */
#navbar ul {
    [B]position: absolute;[/B]
    list-style-type: none;
    margin-left: 10%;
    margin-top: inherit;
}
[B]#navbar ul ul li {
    float: none;
}[/B]
/* ... */

ShamanS08

UPDATED JSFIDDLE http://jsfiddle.net/yPHPW/2/
Great, that worked however now the black background which was 100% of the width of the page is gone. How would I go about getting that back without the use of a background image?

kralcx


#navbar {
padding-top:5px;
height:40px;
width:100%;
background-color:black;
}

deathshadow

Why are you absolute positioning the DIV... and the outer UL. <enus are usually a flow item, why are you APo'ing them? Only thing that should be getting aPo is the dropdowns.

You're using the display:none method of hiding it, which has accessibiltity issues as screen readers like JAWS won't let users get at them. I'd probably swap that out for overflow:hidden on the LI. Crazy as it sounds it works perfect. It doesn't have the accessibiltiy failings of display:none, and isn't as complicated/buggy as the "left:-999em" method.

The biggest problem is the lack of gaps means a lot of floats... the outermost container I would therein just float and set to 100% width (since you can't set float wrapping with overflow as it would break the menu.) -- again, no clue why you are absolute positioning the wrapper, unless you're doing something silly like absolute positioning the entire layout for no reason.

Oh, on 'custom buttons' you have your </a> and </li> reversed. I didn't even notice until I was testing in IE7.

/* assumes a reset is in use */
#navBar {
	/*
		I chose to float this at full width so floats are wrapped. We can't
		use overflow as that would stop the dropdowns from working.
	*/
	float:left;
	width:100%;
	background:#000;
}

#navBar ul {
	list-style:none;
	float:left;
	display:inline; /* prevent IE margin doubling */
	padding-left:10%;
	text-align:center;
	line-height:1.5em; /* just to be sure */
}

#navBar li {
	position:relative;
	float:left;
	overflow:hidden; /* hide dropdown */
	zoom:1; /* trip haslayout, fix legacy IE oddities */
}


#navBar li a {
	padding:0.25em 1em;
	float:left;
	text-decoration:none;
	color:#000;
	background:#FFC;
	border:2px solid #000;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}

#navBar li ul {
	position:absolute;
	top:2em; /* == inner height of parent anchor, line-height + padding */
	left:50%;
	width:12em;
	margin-left:-6em; /* == negative half the width */
	padding:4px 0 0 0;
	/* top padding == top + bottom border width of the anchors */
}

#navBar li li {
	width:100%;
	/*
		we have to leave this floated and display:inline or IE7
		will make MASSIVE gaps between the LI
	*/
}

#navBar li li a {
	float:none;
	display:block;
}

#navBar li li a {
	padding:0.25em 0.5em;
}

#navBar li:hover {
	overflow:visible;
}

#navBar li:hover a {
	background:#FFF;
}

#navBar li:hover li a {
	background:#FFC;
}

#navBar li li:hover a {
	background:#FFF;
}

I use a lot of re-declarations (see the three background-color hover sections) because the child-selector ">" isn't available on legacy IE. You throw a .htc file at it like Peterned's whatever :hover and you can have the menu work all the way back to IE 5.5 windows or 5.2 Mac.

I put a working demo up on my server here:
http://www.cutcodedown.com/for_others/ShamanS08/template.html

As with all my examples the directory:
http://www.cutcodedown.com/for_others/ShamanS08/

... is wide open for easy access to the gooey bits and pieces. Also it's been tested working perfect in 6, 7, 8, 9, 10 and 11, Real Opera (12.17) and Chropera Next, and latest each of Firefox, Safari and Chrome... and it's been tested in IE 5.5 which only has a problem with the 'padding' thing being a bit off. Naturally legacy IE doesn't have rounded corners either, oh noes, not that...

I switched the fonts and padding to all EM based, so it properly dynamically scales... this could have been a problem with the top position with the PX border, but if you pad the top of the child UL equal to the border width (top and bottom) we can mix metrics. It's actually nice doing it that way as there's then a few PX of overlap with the dropdown UL, preventing IE positioning bugs from making the menu hard to use.

Hope this helps.

deathshadow

Oh, I also made the dropdowns centered and flush bottom

jedaisoul

One issue that deathshadow's excellent code does not deal with is using dropdowns on mobiles which may not be able to trigger them! So what I've done is add the facility to toggle between hover and click activation:
- Click on an item in the top level menu, and the dropdown appears (if not already) and stays visible in click mode.
- Click on an item in the second level menu and the menu toggles back to hover activation (if not already).

<!DOCTYPE html>
<html><head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width; height=device-height; initial-scale=1.0">

<title>Menu Demo</title>

<?php
error_reporting(E_ALL ^ E_NOTICE);
/* get parameters */
if (isset($_GET['sel'])) { 
$sel=$_GET['sel']; 
$seltype='click';
}
else { 
$sel='0';
$seltype='hover'; 
}
?>

<style>
* {
    margin:0;
    padding:0;
    border:0;
}

body {
    font:normal 85%/150% "Trebuchet MS",helvetica,sans-serif;
    background:#888;
}

#navBar {
    /*
        I chose to float this at full width so floats are wrapped. We can't
        use overflow as that would stop the dropdowns from working.
    */
    float:left;
    width:100%;
    background:#444;
}

#navBar ul {
    list-style:none;
    float:left;
    display:inline; /* prevent IE margin doubling */
    padding-left:10%;
    text-align:center;
    line-height:1.5em; /* just to be sure */
}

#navBar li {
    position:relative;
    float:left;
}

#navBar li a {
    padding:0.25em 0.5em;
    float:left;
    text-decoration:none;
    color:#000;
    background:#F8F8C8; /* unselected */
    border:2px solid #222;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
}

#navBar li ul {
    position:absolute;
    top:2em; /* == inner height of parent anchor, line-height + padding */
    left:50%;
    width:12em; 
    margin-left:-6em; /* == negative half the width */
    padding:4px 0 0 0;
    /* top padding == top + bottom border width of the anchors */
}

#navBar li li {
    width:100%;
    /*
        we have to leave this floated and display:inline or IE7
        will make MASSIVE gaps between the LI
    */
}

#navBar li li a {
    float:none;
    display:block;
    padding:0.25em 0.5em;
}

* column */
#navBar li:hover a {
    background:#F8F8C8;
}
/* item */
#navBar li a:hover {
    background:#EEE;
}
<?php if ($seltype=='hover') { echo '

/* hover activated */
#navBar li {
    overflow:hidden;
}
#navBar li:hover {
    overflow:visible;
}

';}
else { echo '
/* click activated */
.nonsel {
    overflow:hidden;
}
.sel li:hover a{
    overflow:visible;
}
.sel li a:hover{
    overflow:visible;
}
*/
';} ?>
</style>
</head><body>
<div id="navBar">

<ul>
<li class="<?php if ($sel<>'0') { echo 'non';} ?>sel"><a href="./?sel=0">Home</a></li>
<li class="<?php if ($sel<>'1') { echo 'non';} ?>sel"><a href="./?sel=1">Part 1</a>
<ul>
<li><a href="./">Text fields</a></li>
<li><a href="./">Password fields</a></li>
<li><a href="./">Dropdowns</a></li>
<li><a href="./">Radio/check boxes</a></li>
</ul></li>

<li class="<?php if ($sel<>'2') { echo 'non';} ?>sel"><a href="./?sel=2">Part 2</a>
<ul>
<li><a href="./">Submit/reset buttons</a></li>
<li><a href="./">Custom buttons</a></li>
</ul></li>

<li class="<?php if ($sel<>'3') { echo 'non';} ?>sel"><a href="./?sel=3">Part 3</a>
<ul>
<li><a href="./">HTML5</a></li>
<li><a href="./">JavaScript</a></li>
</ul></li>
</ul>
<!-- end navBar --></div>
</body></html>

Note:

a) The code uses PHP, so the file needs to:
- be called "index.php" or (some such).
- placed on a local server (I use Wamp server).
- linked to via a shortcut.

b) I've embedded the style sheet in the header simply as a convenience as this is just a test program, (despite DS's dislike of the practice).

deathshadow

jedaisoul;1334061 wrote:
One issue that deathshadow's excellent code does not deal with is using dropdowns on mobiles which may not be able to trigger them!

Which is why I'd hide the dropdowns and instead have sub-navigation on the sub-pages, which should be there ANYWAYS regardless of how you do a dropdown.

NOT that I'd have dropdowns on a site where I actually care about mobile -- MOST of the tricks for doing it just annoy the hell out of me on mobile devices -- see the train wreck of scripttard nonsense now where people are turning entire icons into battery and bandwidth wasting messes that are HARDER to use on dropdowns than just trying to use the desktop versions.

jedaisoul;1334061 wrote:
So what I've done is add the facility to toggle between hover and click activation:
- Click on an item in the top level menu, and the dropdown appears (if not already) and stays visible in click mode.
- Click on an item in the second level menu and the menu toggles back to hover activation (if not already).

a) The code uses PHP, so the file needs to:

Again, looks like a job for :target if there's only one level of dropdown... then you don't need a page refresh or PHP to do it.

Though again, I wouldn't bother making the dropdowns work, or even having dropdowns in the first place if I was designing for mobile.

jedaisoul

But :target isn't supported, at least, not as far as I'm aware? And I'm trying to get away from the idea of "designing for mobile(s)". Designs should work for phones, tablets and PCs. So if you want to have dropdowns for PCs you either have to hide them for mobiles and provide alternative navigation (duplicating the code), or make it work for mobiles.

Perhaps I did not make it clear, I was envisaging a scenario where clicking on the top level did not just lock the sub-menu, it took you to the start of the relevant section. So a page refresh would be needed anyway. In this demo there are no sections to link to, so I've just linked back to the same page, to make the demo usable.

In effect, I'm simply adding hover activation (where appropriate) to an otherwise conventional click operated menu. Which, if the design spec says dropdowns are a required feature of the look-and-feel of the site, seems to me to offer the best of both worlds?

deathshadow

jedaisoul;1334203 wrote:
But :target isn't supported, at least, not as far as I'm aware?

All modern browsers, and IE9/newer. Legacy versions of IE I'd make the sub-menus visible via a selector bug.

jedaisoul;1334203 wrote:
And I'm trying to get away from the idea of "designing for mobile(s)". Designs should work for phones, tablets and PCs. So if you want to have dropdowns for PCs you either have to hide them for mobiles and provide alternative navigation (duplicating the code), or make it work for mobiles.

Thing is, I do to -- I tend to think design for "everything" as well. By designing for everything, and designing for accessibility, I came to the conclusion that dropdown menus are bad accessibility. They don't work well for keyboard navigation, they don't work well on mobile, they don't work well for many desktop users who have bad aim unless you script their fade-out to be delayed... they can cause 'link overload' where you are presenting the user with too many options -- at which point much like a number of other design concepts I started lumping them in the "not viable for web deployment" pile.

jedaisoul;1334203 wrote:
Which, if the design spec says dropdowns are a required feature of the look-and-feel of the site, seems to me to offer the best of both worlds?

Honestly, someone comes to me with a "design spec" before we have document structure, semantic markup (which would say if a dropdown is warranted or not) and so forth, they'd probably be introduced to my boot, it's mass, and it's acceleration right into their crotch.

Hell, someone says "look and feel" to me during the development process, my bull**** alarm goes off. Terms like that just feel like another of those "lame excuses"
http://www.456bereastreet.com/archive/200704/lame_excuses_for_not_being_a_web_professional/

jedaisoul

You seem to believe that function is the dominant priority, and, as a developer, that is correct. But that is an unrealistic view of the development process as a whole. Functionality is not, and never has been, an end in itself. It serves a purpose: meeting the client's business objectives. There are exceptions (informational sites spring to mind), but for many commercial sites, aesthetics play a role in the business objecives. As such, they form part of the design objectives so, naturally, precede and inform the functional design. It is as simple as that.

jedaisoul

I can't see how :target is going to achieve what my code does, because, at any given time, you want hover OR target activation to be active. I.e. You do NOT want both at the same time.

Mkra3384

I think just modify your code a little bit to solve this.

1). Add code below(by define the float of list items to none):

#navbar ul ul li {
float: none;
}

2). Change padding left of #navbar li from 10px to 0px:

#navbar li{
background-color:#FFFFCC;
border:2px solid;
border-radius:4px;
float:left;
padding: 5px 15px 5px 0px;
margin:0;
}

3). Add padding: 0 5px to #navbar a instead of your padding left of list items 10px:

#navbar a{
display:block;
text-decoration: none;
color: black;
padding: 0 5px;
text-align:center;
}

4). And the lastly take the dropdown list hover to down a little bit by increasing top value to 32px:

#navbar ul li:hover ul {
display: block;
top:32px;
}

Hope this help!!!

jedaisoul

Mkra3384;1334439 wrote:
I think just modify your code a little bit to solve this.

Solve what? Also, whose code are these amendments for? I suspect that you are referring to the code linked in post #3, is that the case?