0

次のナビゲーション バーは、Firefox、IE、および Chrome で完全に機能します。ただし、IE では、サブ メニューをクリックしたときに表示されるサブ サブ メニューが正しく配置されません。メインメニューと重なっているようです。

他のブラウザーのナビゲーション バーのレイアウトに影響を与えずに、IE で正しく配置するにはどうすればよいですか? 問題は navbar.css コードの最後の行にあります。Margin-top:-23px は、IE を除くすべてのブラウザーで完璧に機能します。ホバー時に問題に直面しています：

  1. ニュースとイベント（運動会リンクと年次リンクが重複しています FAQ（メインメニュー項目）
  2. アドミッションズ ([今すぐ登録] リンクはアドミッションズ リンク自体と重なっています)

ちなみに、私はIE9でテストしています。

ありがとうございました。

navbar.css

#menu {
border:none;
border:0px;
margin:0px;
margin-bottom:5%;
padding:0px;
    /*font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;*/
    font-size:18px;
    font-weight:bold;
}

#nav {
    height:25px;    /*35px;*/
    list-style-type:none;
    margin:0;
    padding:0;
    float:left;
    text-align:center;
    background:#ffcd05;
        }

#nav li {
    display:inline-block;
    position:relative;
    float:left;
/*    background: #006633;
*/  background:#f26739;

    }

#nav li a {
    display:inline-block;
    width:126px;
    line-height:25px;
    padding:0;
    text-decoration:none;
    color:#ffffff;
    }

#nav li li {float:left; #006633;}

#nav li li a {display:block;font-size:14px;}

#nav li:hover {background:#000000;}

/*--- Sublist Styles ---*/
#nav ul {
    position:absolute;
    padding:0px;
    left:0;
    display:none;
    }

/*--- Hide Sub Sublists ---*/
#nav li:hover ul ul {display:none;}

/*--- Sublevel UL's display and position on hover ---*/
#nav li:hover ul {display:block;} 
#nav li li:hover ul {margin-left:110px; margin-top:-23px; display:block;}

私のナビゲーションバー：

<div id="menu">
    <ul id="nav">
<!--        <li><?php echo $this->Html->link('Home', '/pages/home', array()); ?></li>
-->         <li><?php echo $this->Html->link('Our Program', '#', array()); ?><ul>
            <li><?php echo $this->Html->link('Preschool', '/pages/preschool', array()); ?></li>
            <li><?php echo $this->Html->link('Kindergarten', '/pages/kindergarten', array()); ?></li>
            <li><?php echo $this->Html->link('Summer Camp', '/pages/summer_camp', array()); ?></li>
            </ul>
            </li>
            <li><?php echo $this->Html->link('About Us','#', array()); ?><ul>
            <li><?php echo $this->Html->link('Merry Flowers', '/pages/about_us', array()); ?></li>
            <li><?php echo $this->Html->link('Tour Our School','/pages/tour_our_school', array()); ?></li>
            <li><?php echo $this->Html->link('Contact Us', '/pages/contact_us', array()); ?></li>
            </ul>
            </li>

            <li><?php echo $this->Html->link('My Child','#', array()); ?><ul>
            <li><?php echo $this->Html->link('Report Card', '/merry_parents/register', array()); ?></li>
            </ul>
            </li>

            <li><?php echo $this->Html->link('Events','#', array()); ?><ul>
            <li><?php  echo $this->Html->link('News & Events', '#', array()); ?>
                <ul>
                    <li><?php echo $this->Html->link('Sports Day','/pages/sports_day',array()); ?></li>
                    <li><?php echo $this->Html->link('Annual Day','/pages/annual_day',array()); ?></li>
                </ul>
            </li>

            <li><?php  echo $this->Html->link('List of Holidays', '/pages/list_of_holidays', array()); ?></li>
            </ul>
            </li>
            <li><?php echo $this->Html->link('FAQ','#',array()); ?><ul>
            <li><?php  echo $this->Html->link('FAQ', '/pages/faq', array()); ?></li>
            <li><?php  echo $this->Html->link('Feedback', '/feedbacks/add', array()); ?></li>
            <li><?php  echo $this->Html->link('Discussion', '/forum/home', array()); ?></li>
            </ul>
            </li>
            <li><?php echo $this->Html->link('Admissions','#',array()); ?><ul>
            <li><?php echo $this->Html->link('Enroll Now','/students/add', array()); ?></li>
            </ul>
            </li>
        </ul><!--finish ul nav-->
</div> <!--finish div menu-->
4

1 に答える 1

0

わかりました、私はそれを働かせました。サブリスト スタイルに top:23px を追加すると、スポーツの日と年次のサブメニューがニュースとイベントに重ならなくなりました。ありがとうございます。

#menu {
padding:0;
margin:0;
border:none;
margin-bottom:5%;


 /*font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;*/
    font-size:18px;
    font-weight:bold;
    position:relative;
    z-index:1;
}
#nav{
  padding:0;
    margin:0;
    border:none;
  list-style-type:none;
  float:left;
  height:25px;
  text-align:center;
  background:#ffcd05;
}

#nav li{ /*our program, about us, my child, event, etc..*/
     float:left;
     display:block;
     text-align:center;
     background:#f26739;
      width:126px;
      position:relative;  /*very important for good layout of submenus*/
     }
#nav li a{
    text-decoration:none;
    display:block;
    color:#ffffff;
    padding:0;
}
#nav li ul li{font-size:14px;}

#nav li:hover{
      background:#000000;
}
/* sublists style */
#nav ul{  /*lists that come under our program, event, etc...*/
position:absolute; /* very impt for good layout of submenus*/
left:0px;
top:23px;  /*sports day and annual day submenus will not overlap news and events*/
display:none;
padding:0;
}

/*--- Hide Sub Sublists ---*/
#nav li:hover ul ul {display:none;}

/*--- Sublevel UL's display and position on hover ---*/
#nav li:hover ul{display:block;}

#nav li li:hover ul {margin-left:110px; margin-top:-23px;display:block;}
于 2012-08-22T06:59:47.600 に答える