CSSメニューの埋め込みに問題がある

Question

2011年に作成されたクライアントの古いWebサイトを、新しいHTML5 + CSSを理解することにはっきりと苦労していた設計チームが "修正"するよう依頼されました。そこにこのコードが間違ってたくさんある、そしてそのほとんどが、私は、改行のため

<p>&nbsp;</p> 

を使用してのようなものを修正することができました。私も冗談ではない。

とにかく、私がしなければならないことの1つは、ウェブサイトのテキストコンテナとメニューを拡張し、メニューの実際のテキストを新しい幅に合わせて伸ばすことです。しかし、私はメニューのテキストを埋めていくつかの問題を抱えています。私はいくつかのアドバイスのためにフォーラムを通じて検索を行い、提案されたスタイルコードを試しましたが、menu.jpgの領域からメニューテキストを移動するように見えます。

CSS（これは、クライアントのある、ので、それらで叫ぶ）

#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

<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> 

クラス内の表示コールがありますセレクタは問題の一部である可能性が高いですが、私の腸の感覚は、これには、それが間違っているすべてを解剖するためにより専門的知識を持つ人が必要であると私に伝えられています。

あなた自身のコードで何が間違っているのかを理解することと、他人の何が間違っているのかを分析することが1つです。任意のアドバイスは大いに感謝されます:)

Answer 1

私は問題を理解したと思います。

元の著者は、HTML内のスタイルタグに数字の幅を入れて、のすべての単一メニューのようにします。

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

馬鹿。

私はスタイルシートに似たようなものを正しく書き込もうとします。