Blogger messy navigation menu

Hi guys,

I tried to create a sub-menu for the navigation menu in my blog powered by blogger but unfortunately all the menu became not in place. All tabs in the navigation menu used to be on the same straight line.

I tried to change the height for nav menu in CSS but to no avail. Please kindly advise on how to make the navigation tabs on a same straight line.

 

Where are the markup and css for this?

g

 

CSS for the navigation menu as below, appreciate your help.


/* ----- CSS Nav Menu Styling ----- */
#cssnav {
margin: 0px 0 0 -30px;
padding: 0px 0px 0px 0px;
width: 1050px; /* Set your width to fit your blog */
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
color: $(tabs.text.color); /* Template Designer - Change Font Size */
}

#cssnav ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
height: 20px; /* Change Height of Menu */
list-style: none;
margin: 0px;
padding: 0px;
}

#cssnav li {
float: left;
padding: 0px;
}

#cssnav li a {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: block;
margin: 0px;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
text-decoration: none;
}

#cssnav > ul > li > a {
color: $(tabs.text.color); /* Template Designer - Change Font Color */
}

#cssnav ul ul a {
color: $(tabs.text.color); /* Template Designer - Change Color */
}

#cssnav li > a:hover, #cssnav ul li:hover {
color: $(tabs.selected.text.color); /* Template Designer - Change Font Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */
text-decoration: none;
}

#cssnav li ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: none;
height: auto;
padding: 0px;
margin: 0px;
position: absolute;
width: 200px; /* Change Width Of DropDown Menu */
z-index:9999;
}

#cssnav li:hover ul {
display: block;
}

#cssnav li li {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Background */
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 200px; /* Change Width Of DropDown Menu */
}

#cssnav li:hover li a {
background: $(tabs.selected.background.color); /* Template Designer - Change Background of Link on Hover */
}

#cssnav li ul a {
display: block;
height: auto;
margin: 0px;
padding: 10px;
text-align: left;
}

#cssnav li ul a:hover, #cssnav li ul li:hover > a {
color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */
border: 0px;
text-decoration: none;
}]]>

 

Is this problem specific to IE8? If so it's called the "staircase effect" -- a common problem when you float LI. The solution is to set the LI to display:inline and NOTHING else, then style the anchors instead. In this case, move the float from the LI to the anchor, set the LI to display:inline, apply ALL styling to the anchor not the LI.

Though that CAN cause problems with dropdown menus since LI don't like to report their styling in legacy IE properly when set to inline... but a haslayout trigger usually fixes that.

That said, it's blogger, do you even have the ability to fix this given how they don't let you do much of anything to the crap they vomit up and have the unmitigated gall to call markup? Much less you seem to have a number of pixel widths that makes it smell like you've got some rubbish fixed metric (and possibly fixed width) layout -- a giant middle finger to usability and accessibility that would make me suggest pitching the entire mess in the trash.

Sadly that describes WAY to many of today's off the shelf solutions.