fixing my nav bar to have main menus on same line

[Agent69]

I'm trying to make my navbar to have all the menu to be on the same line instead of the 2 lines it is giving me right now... http://luckyrelic.webs.com/DoomsDayM...all/test2.html

i've tried looking at the droplinebar.css & adjusting some of these codes & to no avail im still not getting the desired results... i changed the margins to auto & the font size to 6px but still not getting it right...

.droplinebar{
overflow: hidden;
}

.droplinebar ul{
margin-left: auto;
margin-right: auto;
padding: 0;
width: 80%;
font: bold 6px Arial;
background: #242c54 url(bluedefault.gif) center center repeat-x; /*default background of menu bar*/
}

.droplinebar ul li{
display: inline;
}

.droplinebar ul li a{
color: white;
padding: 9px 9px;
text-decoration: none;
}

.droplinebar ul li a:visited{
color: white;
}

.droplinebar ul li a:hover, .droplinebar ul li .current{ /*background of main menu bar links onMouseover*/
color: white;
background: transparent url(blueactive.gif) center center repeat-x;
}

/* Sub level menus*/
.droplinebar ul li ul{
position: absolute;
z-index: 100;
left: 0;
top: 0;
background: #303c76; /*sub menu background color */
visibility: hidden;
}

/* Sub level menu links style */
.droplinebar ul li ul li a{
font: normal 5px Verdana;
padding: 6px;
padding-right: 8px;
margin-left: auto;
margin-right: auto;
border-bottom: 1px solid navy;
}

.droplinebar ul li ul li a:hover{ /*sub menu links' background color onMouseover */
background: #242c54;
}

i don't know what else to do so any help will be greatly appreciated...

[kobo1d]

easiest way would be to set a manual width for the whole bar...

add something like this:

width:800px;

to

.droplinebar{
overflow: hidden;
}


so it loks like this:

.droplinebar{
overflow: hidden;
width:800px;
}

you can change the width value to whatever fits best for you...
but i noticed some submenu's are also to large, so you should maybe balance it so it fits best for your needs...

also i would lower the hover-height on the menu text.. in my opinion its way to huge difference between normal and hovered text... (just my 2 cents) ;-)


cheers

[Agent69]

also i would lower the hover-height on the menu text.. in my opinion its way to huge difference between normal and hovered text... (just my 2 cents) ;-)


cheers

so where in this code am i going to edit the hover-height?? i have no clue on where to find it...

/*********************
//* jQuery Drop Line Menu- By Dynamic Drive: http://www.dynamicdrive.com/
//* Last updated: June 27th, 09'
//* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/
*********************/

var droplinemenu={

arrowimage: {classname: 'downarrowclass', src: 'down.gif', leftpadding: 5}, //customize down arrow image
animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={h:$curobj.find('a:eq(0)').outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
if (!this.istopheader)
$subul.css({left:0, top:this._dimensions.h})
var $innerheader=$curobj.children('a').eq(0)
$innerheader=($innerheader.children().eq(0).is('span'))? $innerheader.children().eq(0) : $innerheader //if header contains inner SPAN, use that
$innerheader.append(
'<img src="'+ droplinemenu.arrowimage.src
+'" class="' + droplinemenu.arrowimage.classname
+ '" style="border:0; padding-left: '+droplinemenu.arrowimage.leftpadding+'px" />'
)
$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
if ($targetul.queue().length<=1) //if 1 or less queued animations
if (this.istopheader)
$targetul.css({left: $mainmenu.offset().left, top: $mainmenu.offset().top+this._dimensions.h})
if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow
$mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'})
$targetul.slideDown(droplinemenu.animateduration.over)
},
function(e){
var $targetul=$(this).children("ul:eq(0)")
$targetul.slideUp(droplinemenu.animateduration.out)
}
) //end hover
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible', width:$mainmenu.width()})
}) //end document.ready
}
}

[Agent69]

nvm...i figured out on how to adjust the hover-height...

[Agent69]

ok i'm about done in completing my nav bar & all I needed to do right now is to fix some minor errors in it...
here is my navbar...

right now i'm having 2 problems that is not much of a big deal, but hopefully gets resolved to make my navbar look more polished...

first problem i have is that i can't seem to adjust the size of my nav bar... i wanted to make it abit larger in size than what it is now with the main menus still on the same single line..
i tried changing the font size in the droplinebar.css file, but still not getting the desired results...

2nd problem is that it seems that there is some space between the menus when you hover in the teams tab that shows the webpage's background..
i have no clue on what to do with this so hopefully someone can help me out...

3rd problem, i wanted my menus & submenus to have the amount of padding just like in the jquery dropline menu....
i tried changing the paddings in the droplinebar.css file & i'm still not getting the desired results, so any help are greatly appreciated..

[Agent69]

here are my code for the navbar:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title> DoomsDay Machine League- General Rules </title>

<style type="text/css" media="all">
body {background:#181818 url(http://i68.photobucket.com/albums/i2...lz/LP-BG.jpg);
width:651px;color:#FFFFCC;font-family:'trebuchet MS';text-align:center;}

p {font-weight;normal;font-size:12px;line-height:110%;}

.title {font-size:44px;font-weight:bold;line-height:120%;font-stretch:narrow;}
.left {text-align:left;}
.center {text-align:center;}
.indent {position:relative;left:20px;max-width:70%;}
.red {color:#CC0011;}
.white {color:#FFFFFF;}
.orange {color:#FF8811;}
.line {height:9px;color:#555555;background-color:#555555;}
.half {width:300px;float:left;}
.bold {font-weight:bolder;}
.uline {text-decoration:underline;}
.italic {font-style:italic;}

a:link {color:#FFFFCC;text-decoration:none;}
a:visited {color:#FFFFCC;text-decoration:none;}
a:active {color:#FFFFCC;text-decoration:none;}
a:hover {color:#FF0000;text-decoration:none;font-size:14px;height:14px;font-weight:800;}

</style>

<link rel="stylesheet" type="text/css" href="http://luckyrelic.webs.com/DoomsDayMachine-espn%20fantasy%20football/droplinebar.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>

<script src="http://luckyrelic.webs.com/DoomsDayMachine-espn%20fantasy%20football/droplinemenu.js" type="text/javascript">
</script>

<script type="text/javascript">

//build menu with DIV ID="myslidemenu" on page:
droplinemenu.buildmenu("mydroplinemenu")

</script>

</head>

<body>

<div id="mydroplinemenu" class="droplinebar">
<ul>
<li><a href="http://www.yahoo.com">HOME</a></li>

<li><a href="http://www.yahoo.com">IMPACT ZONE</a></li>

<li><a href="http://www.yahoo.com">LEAGUE RULES</a>
<ul>
<li><a href="http://www.yahoo.com">General Rules</a></li>
<li><a href="http://www.yahoo.com">Draft Order Rules</a></li>
<li><a href="http://www.yahoo.com">Draft Pick Rules</a></li>
<li><a href="http://www.yahoo.com">Award Rules</a></li>
<li><a href="http://www.yahoo.com">The Joke Thread</a></li>
<li><a href="http://www.yahoo.com">Matchup Meltdown</a></li>
<li><a href="http://www.yahoo.com">Lucky Ladders</a></li>
<li><a href="http://www.yahoo.com">Pick 3 Championship</a></li>
<li><a href="http://www.yahoo.com">Fantasy Jack</a></li>
</ul>

<li><a href="http://www.yahoo.com">TEAMS</a>
<ul>
<li><a href="http://www.yahoo.com">Saints And Sinners</a>
<ul>
<li><a href="http://www.yahoo.com">Dah Jay Show</a>
<ul>
<li><a href="http://www.yahoo.com">Team Page</a></li>
<li><a href="http://www.yahoo.com">Roster</a></li>
<li><a href="http://www.yahoo.com">All-Time H2H Matchups</a></li>
<li><a href="http://www.yahoo.com">Career Highlights</a></li>
<li><a href="http://www.yahoo.com">Draft Picks</a></li>
<li><a href="http://www.yahoo.com">Trade Block</a></li>
</ul>
</li>
<li><a href="http://www.yahoo.com">Team Mills</a>
<ul>
<li><a href="http://www.yahoo.com">Team Page</a></li>
<li><a href="http://www.yahoo.com">Roster</a></li>
<li><a href="http://www.yahoo.com">All-Time H2H Matchups</a></li>
<li><a href="http://www.yahoo.com">Career Highlights</a></li>
<li><a href="http://www.yahoo.com">Draft Picks</a></li>
<li><a href="http://www.yahoo.com">Trade Block</a></li>
</ul>
</li>
<li><a href="http://www.yahoo.com">CONY NYG/ CO.NY</a>
<ul>
<li><a href="http://www.yahoo.com">Team Page</a></li>
<li><a href="http://www.yahoo.com">Roster</a></li>
<li><a href="http://www.yahoo.com">All-Time H2H Matchups</a></li>
<li><a href="http://www.yahoo.com">Career Highlights</a></li>
<li><a href="http://www.yahoo.com">Draft Picks</a></li>
<li><a href="http://www.yahoo.com">Trade Block</a></li>
</ul>
</li>
<li><a href="http://www.yahoo.com">The Gathering</a>
<ul>
<li><a href="http://www.yahoo.com">Team Page</a></li>
<li><a href="http://www.yahoo.com">Roster</a></li>
<li><a href="http://www.yahoo.com">All-Time H2H Matchups</a></li>
<li><a href="http://www.yahoo.com">Career Highlights</a></li>
<li><a href="http://www.yahoo.com">Draft Picks</a></li>
<li><a href="http://www.yahoo.com">Trade Block</a></li>
</ul>
</li>
<li><a href="http://www.yahoo.com">Westcoast Thugs</a>
<ul>
<li><a href="http://www.yahoo.com">Team Page</a></li>
<li><a href="http://www.yahoo.com">Roster</a></li>
<li><a href="http://www.yahoo.com">All-Time H2H Matchups</a></li>
<li><a href="http://www.yahoo.com">Career Highlights</a></li>
<li><a href="http://www.yahoo.com">Draft Picks</a></li>
<li><a href="http://www.yahoo.com">Trade Block</a></li>
</ul>
</li>
</ul>
<li><a href="http://www.yahoo.com">Wages Of Sin</a>
<ul>
<li><a href="http://www.yahoo.com">Team Stean</a>
<ul>
<li><a href="http://www.yahoo.com">Team Page</a></li>
<li><a href="http://www.yahoo.com">Roster</a></li>
<li><a href="http://www.yahoo.com">All-Time H2H Matchups</a></li>
<li><a href="http://www.yahoo.com">Career Highlights</a></li>
<li><a href="http://www.yahoo.com">Draft Picks</a></li>
<li><a href="http://www.yahoo.com">Trade Block</a></li>
</ul>
</li>
<li><a href="http://www.yahoo.com">Team Tomka</a>
<ul>
<li><a href="http://www.yahoo.com">Team Page</a></li>
<li><a href="http://www.yahoo.com">Roster</a></li>
<li><a href="http://www.yahoo.com">All-Time H2H Matchups</a></li>
<li><a href="http://www.yahoo.com">Career Highlights</a></li>
<li><a href="http://www.yahoo.com">Draft Picks</a></li>
<li><a href="http://www.yahoo.com">Trade Block</a></li>
</ul>
</li>
<li><a href="http://www.yahoo.com">Inglorious Buzzterds</a>
<ul>
<li><a href="http://www.yahoo.com">Team Page</a></li>
<li><a href="http://www.yahoo.com">Roster</a></li>
<li><a href="http://www.yahoo.com">All-Time H2H Matchups</a></li>
<li><a href="http://www.yahoo.com">Career Highlights</a></li>
<li><a href="http://www.yahoo.com">Draft Picks</a></li>
<li><a href="http://www.yahoo.com">Trade Block</a></li>
</ul>
</li>
<li><a href="http://www.yahoo.com">Central Florida Blue Streaks</a>
<ul>
<li><a href="http://www.yahoo.com">Team Page</a></li>
<li><a href="http://www.yahoo.com">Roster</a></li>
<li><a href="http://www.yahoo.com">All-Time H2H Matchups</a></li>
<li><a href="http://www.yahoo.com">Career Highlights</a></li>
<li><a href="http://www.yahoo.com">Draft Picks</a></li>
<li><a href="http://www.yahoo.com">Trade Block</a></li>
</ul>
</li>
<li><a href="http://www.yahoo.com">Cincy Konvicts</a>
<ul>
<li><a href="http://www.yahoo.com">Team Page</a></li>
<li><a href="http://www.yahoo.com">Roster</a></li>
<li><a href="http://www.yahoo.com">All-Time H2H Matchups</a></li>
<li><a href="http://www.yahoo.com">Career Highlights</a></li>
<li><a href="http://www.yahoo.com">Draft Picks</a></li>
<li><a href="http://www.yahoo.com">Trade Block</a></li>
</ul>
</li>
</ul>
</ul>
</li>

<li><a href="http://www.yahoo.com">LEAGUE HISTORY</a>
<ul>
<li><a href="http://www.yahoo.com">All-Time Records</a></li>
<li><a href="http://www.yahoo.com">Season Records</a>
<ul>
<li><a href="http://www.yahoo.com">2009 Season</a></li>
<li><a href="http://www.yahoo.com">2010 Season</a></li>
<li><a href="http://www.yahoo.com">2011 Season</a></li>
</ul>
</li>
<li><a href="http://www.yahoo.com">Hall Of Fame</a></li>
<li><a href="http://www.yahoo.com">Spoils Of War</a></li>
</ul>
</li>

<li><a href="http://www.yahoo.com">FANTASY HELP</a>
<ul>
<li><a href="http://www.yahoo.com">Scores & Tips</a></li>
<li><a href="http://www.yahoo.com">Helpful Websites</a></li>
</ul>
</li>

<li><a href="http://www.yahoo.com">FUN & GAMES</a>
<ul>
<li><a href="http://www.yahoo.com">Games</a></li>
<li><a href="http://www.yahoo.com">Videos</a></li>
</ul>
</li>

</ul>
</div>

<script type="text/javascript" src="http://images.webs.com/static/global/js/webs/usersites/escort.js">
</script>
<script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="none";_uff=false;urchinTracker();}
</script>

</body>
</html>

here are my codes for the droplinebar.css:

.droplinebar{
overflow: hidden;
width:651px;
}

.droplinebar ul{
margin-left: 0;
margin-right: 0;
padding: 0;
width: 100%;
font: bold 14px Arial;
background: #242c54 url(bluedefault.gif) center center repeat-x; /*default background of menu bar*/
}

.droplinebar ul li{
display: inline;
}

.droplinebar ul li a{
color: white;
padding: 15px 11px;
text-decoration: none;
}

.droplinebar ul li a:visited{
color: white;
}

.droplinebar ul li a:hover, .droplinebar ul li .current{ /*background of main menu bar links onMouseover*/
color: white;
background: transparent url(blueactive.gif) center center repeat-x;
}

/* Sub level menus*/
.droplinebar ul li ul{
position: absolute;
z-index: 100;
left: 0;
top: 0;
background: #303c76; /*sub menu background color */
visibility: hidden;
}

/* Sub level menu links style */
.droplinebar ul li ul li a{
font: normal 12px Verdana;
padding: 11px;
padding-right: 11px;
margin-left: 0;
margin-right: 0;
border-bottom: 1px;
}

.droplinebar ul li ul li a:hover{ /*sub menu links' background color onMouseover */
background: #242c54;
}

any help are greatly appreciated...