CSS menu - Nav bar goes haywire after removing one item

Have been using a CSS menu from puremenucss for several years for a nonprofit site. Recently I had to remove one of the main menu categories. After doing so, the menu was completely haywire.

Here is the original site: http://frenchteachers.org

Here is the test site with the wonky menu (ie my wonky code somewhere):
http://frenchteachers.org/menutest02.htm

Any thoughts as to what I’m doing wrong? (I think it is probably something very simple that my brain is just not seeing right now!)

I was just trying to see what could cause the float drop, after a brief check I refreshed the page but then the float drop was no more. Sorry I came in so late, but not, now you seem to sorted it out yourself.

@lindagal2, Can you tell what you changed or what you think was the problem?

Erik_J … thank you so much … I fixed it … SORT of ! Turns out I had accidentally erased one UL tag.

Followup question: I’ve been able to space the menu items across the navigation bar by adding padding to the left and right sides but is there a more elegant way to do that to make all the items space evenly across? (Notice that the “home” link on the l.h. side is closer to the page edge than the r.h. side). Also, the square that surrounds the drop down menu on hover is spaced weird.

Any more elegant (or better coded) ideas gratefully accepted!

That is a common request here. Sure someone here does have a general nav demo to post, but I took your nav, made it standalone and changed it a little (comment marked). Try it out and make it behave like you want the nav to do. E.g.:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>Evenly Spaced Nav Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="PSPad editor, www.pspad.com">
<style>
/*  Start PureCSSMenu.com STYLE */
/* border-box sizing might affect some total lenghs, please check that :) */
.mainnav{ box-sizing:border-box;}
.mainnav *,
.mainnav *:before,
.mainnav *:after{ box-sizing:inherit;}

#pcm{display:none;}
ul.mainnav ul{display:none}
ul.mainnav li:hover>ul{display:block}
ul.mainnav ul{position: absolute;left:0;top:98%;  z-index: 100;}
ul.mainnav li:last-child ul{position: absolute;left:auto;right:0;top:98%;  z-index: 100;}
ul.mainnav ul ul{position: absolute;left:98%;top:-2px; }
ul.mainnav {
    display:table; /***************************************/
    border-collapse:collapse; /***************************************/
    margin:0;
    list-style:none;
    padding:0;
    background-color:#b6c3d9;
    background-repeat:repeat;
    width:100%; /* added this in */
}
ul.mainnav ul {
    margin:0;
    padding:0;
    list-style:none;
    padding:0 0 2px 0; /* removed 12px right padding *************************************/
    background-color:#b6c3d9;
    background-repeat:repeat;
    border-color:#cccccc #697180 #697180 #cccccc;
    border-width:1px;
    border-style:solid;
}
ul.mainnav ul{
    width:100%;
    /* min-width:180.6px; **************************************/
    min-width:11em;
}
ul.mainnav > li{
    display:table-cell; /***************************************/
    width:1%; /* key to evenly spacing **************************************/
    white-space:nowrap; /* key to evenly spacing ************************************/
}
ul.mainnav a:active,
ul.mainnav a:focus {
outline-style:none;
}
ul.mainnav a,
ul.mainnav li.dis a:hover,
ul.mainnav li.sep a:hover {
    display:block;
    vertical-align:middle;
    background-color:#b6c3d9;
    border-width:1px;
    border-color:#b6c3d9;
    border-style:solid;
    text-align:left;
    text-align:center;
    text-decoration:none;
    padding:4px 0; /*changed from 2 5 2 10 */ /* removed side paddings *********************************/
    font:bold 13px Arial;
    color: #1f448a;
    text-decoration:none;
    /* cursor:default; *************************************************/
}
ul.mainnav span{
    overflow:hidden;
}
ul.mainnav ul li {
    display:block;
}
ul.mainnav ul a {
    padding:0 1em; /***************************************/
    text-align:left;
    white-space:nowrap;
}
ul.mainnav li.sep{
    text-align:left;
    padding:0;
    line-height:0;
    height:100%;
}
ul.mainnav li.sep span{
    float:none;
    padding-right:0;
    width:3px;
    height:100%;
    display:inline-block;
    background-color:#cccccc #697180 #697180 #cccccc;
    background-image:none;
}
ul.mainnav ul li.sep span{
    width:100%;
    height:3px;
}
ul.mainnav li:hover{
    position:relative;
}
ul.mainnav li:hover>a{
    background-color:#a62c30;
    border-color:#a62c30;
    border-style:solid;
    font:bold 13px Arial;
    color: #ffffff;
    text-decoration:none;
}
ul.mainnav li a:hover{
    position:relative;
    background-color:#a62c30;
    border-color:#a62c30;
    border-style:solid;
    font:bold 13px Arial;
    color: #ffffff;
    text-decoration:none;
}
ul.mainnav li.dis a {
    color: #666 !important;
}
ul.mainnav img {border: none;float:left;_float:none;margin-right:2px;width:16px; height:16px;}
ul.mainnav ul img {width:16px; height:16px;}
ul.mainnav img.over{display:none}
ul.mainnav li.dis a:hover img.over{display:none !important}
ul.mainnav li.dis a:hover img.def {display:inline !important}
ul.mainnav li:hover > a img.def  {display:none}
ul.mainnav li:hover > a img.over {display:inline}
ul.mainnav a:hover img.over,
ul.mainnav a:hover ul img.def,
ul.mainnav a:hover a:hover img.over{display:inline}
ul.mainnav a:hover img.def,
ul.mainnav a:hover ul img.over,
ul.mainnav a:hover a:hover img.def{display:none}
ul.mainnav a:hover ul{display:block}
ul.mainnav span{
    display:block;
    background-image:url(./images/arr_white.gif);
    background-position:right center;
    background-repeat: no-repeat;
  /*padding-right:12px;**********************************************/
}
ul.mainnav li:hover>a>span{    background-image:url(../images/arrv_white.gif);}
ul.mainnav a:hover span{    _background-image:url(../images/arrv_white.gif)}
ul.mainnav ul span,
ul.mainnav a:hover table span{background-image:url(../images/arr_white.gif)}
/* End PureCSSMenu.com STYLE */
</style>
</head><body>

<!-- Start PureCSSMenu.com MAIN NAV MENU -->
<ul class="mainnav mainnavm">
    <li class="mainnavi"><a class="mainnavi" href="/" title="Home"><span>HOME</span></a></li>
    <li class="mainnavi"><a class="mainnavi" href="aatfabout.htm"><span>ABOUT</span></a>
        <ul class="mainnavm">
            <li class="mainnavi"><a class="mainnavi" href="aatfabout.htm">About the AATF</a></li>
            <li class="mainnavi"><a class="mainnavi" href="hq/membership.htm">Membership</a></li>
            <li class="mainnavi"><a class="mainnavi" href="hq/chapterofficers.htm">Chapters</a></li>
            <li class="mainnavi"><a class="mainnavi" href="hq/executivecouncil.htm">Executive Council</a></li>
            <li class="mainnavi"><a class="mainnavi" href="hq/commissions.html">Commissions</a></li>
            <li class="mainnavi"><a class="mainnavi" href="hq/constitution.htm">Constitution</a></li>
            <li class="mainnavi"><a class="mainnavi" href="archives/archives.htm">Archives</a></li>
            <li class="mainnavi"><a class="mainnavi" href="hq/mailinglist.htm">Mailing List</a></li>
        </ul>
    </li>
    <li class="mainnavi"><a class="mainnavi" href="#"><span>PROGRAMS</span></a>
        <ul class="mainnavm">
            <li class="mainnavi"><a class="mainnavi" href="concours/" target="_blank">National French Contest</a></li>
            <li class="mainnavi"><a class="mainnavi" href="shf/" target="_blank">French Honor Society</a></li>
            <li class="mainnavi"><a class="mainnavi" href="nfw/" target="_blank">National French Week</a></li>
            <li class="mainnavi"><a class="mainnavi" href="hq/awardsandgrants.htm">Exemplary Programs</a></li>
            <li class="mainnavi"><a class="mainnavi" href="hq/summerscholarships.htm">Scholarships</a></li>
            <li class="mainnavi"><a class="mainnavi" href="hq/contests.htm">Contests</a></li>
            <li class="mainnavi"><a class="mainnavi" href="convention/" target="_blank">Convention</a></li>
            <li class="mainnavi"><a class="mainnavi" href="hq/leadership.htm" target="_blank">Leadership</a></li>
        </ul>
    </li>
    <li class="mainnavi"><a class="mainnavi" href="hq/publications.htm"><span>PUBLICATIONS</span></a>
        <ul class="mainnavm">
            <li class="mainnavi"><a class="mainnavi" href="http://frenchreview.frenchteachers.org/" target="_blank">French Review</a></li>
            <li class="mainnavi"><a class="mainnavi" href="hq/FR-RateSheet-2016-2017.doc" target="_blank">Advertising</a></li>
            <li class="mainnavi"><a class="mainnavi" href="hq/forms/subscription.pdf" target="_blank">Library Subscriptions</a></li>
            <li class="mainnavi"><a class="mainnavi" href="hq/nb.htm">National Bulletin</a></li>
            <li class="mainnavi"><a class="mainnavi" href="http://proceedings.frenchteachers.org" target="_blank">On-Line Proceedings</a></li>
            <li class="mainnavi"><a class="mainnavi" href="hq/press.htm">AATF Press</a></li>
            <li class="mainnavi"><a class="mainnavi" href="bulletin/bookclub/BookClub.htm">Book Club Archives</a></li>
        </ul>
    </li>
    <li class="mainnavi"><a class="mainnavi" href="#"><span>RESOURCES</span></a>
        <ul class="mainnavm">
            <li class="mainnavi"><a class="mainnavi" href="hq/advocacy.htm">Advocacy</a></li>
            <li class="mainnavi"><a class="mainnavi" href="hq/curatedresources.htm">Curated Resources</a></li>
            <li class="mainnavi"><a class="mainnavi" href="hq/promotional.htm">Promotional Materials</a></li>
            <li class="mainnavi"><a class="mainnavi" href="hq/pedagogical.htm">Pedagogical Materials</a></li>
            <li class="mainnavi"><a class="mainnavi" href="general/">Web-based Activities</a></li>
            <li class="mainnavi"><a class="mainnavi" href="hq/fdlmsubscription.htm">Fran&ccedil;ais dans le Monde</a></li>
            <li class="mainnavi"><a class="mainnavi" href="hq/partners.htm">Partner Associations</a></li>
            <li class="mainnavi"><a class="mainnavi" href="http://chapters.frenchteachers.org" target="_blank">For Chapter Officers</a></li>
        </ul>
    </li>
</ul>
<!-- End PureCSSMenu.com MAIN NAV MENU -->

</body></html>

Thanks Erik_J — I tried out your improvements on a test page here:
http://frenchteachers.org/menutest03.htm

It looks great and the code is much less cluttered with bizarre padding numbers. :wink:

Two questions:

First off, how do I get the drop-down menu back to double-space (or space and a half – whatever it is in the original test page above.

Also, I was looking for “mainnavi” and “mainnavm” in the stylesheet and cannot find them. I didn’t think much about it when I originally included this menu several years ago – I just put in the PureCSSmenu info. However, now I’m curious where the info on those classes is.

Thanks so much!

You could add some padding top and bottom to the item like this:

ul.mainnav ul a {
    padding: .5em 1em; /***************************************/
    text-align:left;
    white-space:nowrap;
}
1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.