填充CSS菜单时遇到问题

Question

I have been asked to "fix" a client's old website which was written in 2011, by a design team that was clearly struggling to understand the then-new HTML5+CSS. There is a lot wrong with this code, and most of it I've been able to fix, stuff like using

<p>&nbsp;</p>

for line breaks. I'm not even kidding.

Anyway, one of the things I have been asked to do is extend the website's text container and menu, and stretch out the menu's actual text to fit the new width, which has gone fine. However, I'm having some trouble with padding out the menu text. I did a search through the forums for some advice, and tried out the style code suggested, but it seems to move the menu text out of the area of menu.jpg where it needs to be.

CSS (this is the client's, so yell at them)

#header_menu_container
/* This is verbatim from the code I am working with.  I seriously have NO IDEA why this selector even exists. */
{


}

#header_menu 
{
    margin: 0;
    display: inline-block;
    list-style: none;
    font-size: 15px;
}

/* header menu colour */
#header_menu li a {
color: #516a82;
}
/* menu hover colour */
#header_menu li a:hover{
color: #b55239;
text-decoration: none;
}

.no_submenu, .has_submenu
{
    display: block;
    float: left;
    position: relative;
}

.no_submenu a, .has_submenu span{
display: block;
font-size: 15px;
font-family: "Times New Roman", Times, serif;
color: #516a82;
text-decoration: none;
}

.no_submenu a:hover, .has_submenu span:hover{
color: #b55239;
}

.has_submenu span{
cursor: pointer;
_cursor: hand;
}

.is_submenu{
position: absolute;
left: -10px;
top: 32px;
background: #dfd7c5;
margin: 0;
padding: 0;
list-style: none;
z-index: 9999;
}

.is_submenu li a{
display: block;
text-align: left;
padding-left: 10px;
width: 122px;
padding-right: 10px;
font-size: 15px;
font-family: "Times New Roman", Times, serif;
color: #516a82;
text-decoration: none;
pading-top: 10px;
padding-bottom: 10px;
line-height: 18px;
}

.is_submenu li a:hover{
color: #b55239;
}

HTML (based on client's, with a bit of my modification)

<ul id="header_menu">
                    <li class="no_submenu" style="width: 63px;">
                        <b><a href="./index.html">Home</a></b>
                    </li>
                    <li class="has_submenu" id="who-we-are">
                        <b><span style="width: 103px;">Who We Are</span></b>
                        <ul class="is_submenu" style="display: none;">
                            <li>
                                <b><a href="./whoweare_janyce-lastman.html">Janyce Lastman</a></b>
                            </li>
                            <li>
                                <b><a href="./whoweare_ziny-kirshenbaum.html">Ziny Kirshenbaum</a></b>
                            </li>
                            <li>
                                <b><a href="./whoweare_tutors.html">Tutors</a></b>
                            </li>
                        </ul>
                    </li>

                    <li class="has_submenu" id="services"><span style="width: 73px;"><b>Services</b></span>
                        <ul class="is_submenu" style="display: none;">
                            <li>
                                <b><a href="./services_consultant-to-schools.html">Consultant To Schools</a></b>
                            </li>
                            <li>
                                <b><a href="./services_education-consulting-and-case-management.html">Education Consulting And Case Management</a></b>
                            </li>
                            <li>
                                <b><a href="./services_educational-assessments.html">Educational Assessments</a></b>
                            </li>
                            <li>
                                <b><a href="./services_school-placement-consultation.html">School Placement Consultation</a></b>
                            </li>
                            <li>
                                <b><a href="./services_seminars-and-workshops.html">Seminars And Workshops</a></b>
                            </li>
                            <li>
                                <b><a href="./services_test-tips-support.html">Test Tips Support</a></b>
                            </li>
                            <li>
                                <b><a href="./services_tutoring.html">Tutoring</a></b>
                            </li>
                        </ul>
                    </li>

                    <li class="has_submenu" id="media-and-press">
                        <span style="width: 113px;"><b>Media &amp; Press</b></span>
                            <ul class="is_submenu" style="display: none;">
                                <li>
                                    <b><a href="./media-and-press_in-the-press.html">In the Press</a></b>
                                </li>
                                <li>
                                    <b><a href="./media-and-press_book-reviews.html">Book Reviews</a></b>
                                </li>
                                <li>
                                    <b><a href="./media-and-press_selected-articles.html">Selected Articles</a></b>
                                </li>
                                <li>
                                    <b><a href="./media-and-press_interesting-links.html">Interesting Links</a></b>
                                </li>
                            </ul>
                    </li>
                    <li class="no_submenu" style="width: 53px;">
                        <a href="./faq.html"><b>FAQ</b></a>
                    </li>

                    <li class="has_submenu" id="testimonials"><span style="width: 103px;"><b>Testimonials</b></span>
                        <ul class="is_submenu" style="display: none;">
                            <li>
                                <b><a href="./testimonials_ttg-tutors.html">Testimonials for TTG Tutors</a></b>
                            </li>
                            <li>
                                <b><a href="./testimonials_janyce-lastman.html">Testimonials for Janyce Lastman</a></b>
                            </li> 
                        </ul>
                    </li>     

                    <li class="has_submenu" id="contact-us">
                    <span style="width: 70px;"><b>Contact</b></span>
                        <ul class="is_submenu" style="display: none;">
                            <li>
                                <b><a href="./contactus_contact-info.html">Contact Info</a></b>
                            </li>
                            <li>
                                <b><a href="./contactus_employment-opportunities.html">Employment Opportunities</a></b>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>

There's a display call inside a class selector, which is likely part of the issue, but my gut feeling tells me that this needs someone with more expertise to dissect everything wrong with it.

It's one thing to figure out what's wrong with your own code, and another to try and analyze what's wrong with someone else's. Any advice would be greatly appreciated :)

Answer 1

So looking back over the code again, I think I've figured out the problem.

Instead of putting padding in the CSS, the original authors put a numerical width in a style tag in the HTML for every single menu , eg

<span style="width: 73px;"><b>Services</b></span>

Idiots.

I'm going to try and write something similar into the stylesheet properly.