Navigation Extends Beyond Bottom Of Browser

[son]

I have a lovely horizontal nav where the sub-lists only show when user go over the li element. The code is:

#topNav li {float:left; position:relative; margin:0 10px;}#topNav a {color:#000;}#topNav li ul {display: none;}#topNav li:hover ul {position: absolute; top:23px; left:0;display:block; padding:5px 0;}#topNav li:hover ul li {display:block;background:url(nbg.png) repeat;-width:230px; z-index:2; color:#000; border-bottom:#000 1px solid;}

The problem now is that the nav items became so many that they do not all fit on computer screen and you cannot get to last items in nav if you see what I mean. Is there a way around this? Son

[ckrudelux]

I have a lovely horizontal nav where the sub-lists only show when user go over the li element. The code is:

#topNav li {float:left; position:relative; margin:0 10px;}#topNav a {color:#000;}#topNav li ul {display: none;}#topNav li:hover ul {position: absolute; top:23px; left:0;display:block; padding:5px 0;}#topNav li:hover ul li {display:block;background:url(nbg.png) repeat;-width:230px; z-index:2; color:#000; border-bottom:#000 1px solid;}

The problem now is that the nav items became so many that they do not all fit on computer screen and you cannot get to last items in nav if you see what I mean. Is there a way around this? Son

I think this could be useful:overflow

[son]

If possible I would like to avoid it as it does not look that great. Or do you know a method now of styling this better than it worked in the past? Son

[Ingolme]

By default, those extra elements should appear below the first ones. What do you want it to do? Depending on how you want the extra menu items to be handled there can be many solutions. Edit: You mean the vertical menu items? I suppose the only thing you can do is detect when the menu is overflowing (exceeding a max-height value) and moving them to a second column with some CSS similar to this (setting the class of the ul to "overflow"):

#topNav ul.overflow {  width: 360px;}#topNav ul.overflow li {  width: 180px;	/* If you have borders, margin or padding, make sure to change the width so that the sum of all the values is 180 */}

[ckrudelux]

If possible I would like to avoid it as it does not look that great. Or do you know a method now of styling this better than it worked in the past? Son

Using JS you could create your own scrollbar. Down side is what only users with JS enabled could use it.

[Synook]

For the sake of good UI design you should probably reduce the number of menu options available .

[son]

Thanks everyone. I tried all and to be honest it is right: to reduce the items in nav seems the only way to do the trick. I sat for a while and created a very nice menu that was still a tiny notch too long as it was (had it all in columns). However, unfortunately the decision is not up to me and I have now suggested a simple drop-down that lists everything in one vertical line. It is also not very pretty, but it would not convey the message of a very elaborate navigation that somehow got messed up;-) Son