1

CSS と HTML だけを使用して動的なサイド メニューに取り組んでいます。このメニューは、Internet Explorer を除くすべてのブラウザーで適切に機能しますが、IE では、サブメニューを構成するネストされたリストが右に約 50 ピクセル離れて配置されているため、サブ メニューとメイン メニューの間にギャップが生じます。メニューはこのページの左側にあります

http://www.mcstech.net/computer-training/visio/

これがコードです。

div.sidemenu{width:200px;}
div.sidemenu ul{background:#EBEBEB;list-style:none;margin:0;padding:0;width:200px;}
div.sidemenu li{float:none;font-size:1.2em;}
div.sidemenu li a{color:#333333;display:block;line-height:35px;text-align:left;text-decoration:none;margin:0px;padding:5px;text-align:left;text-decoration:none}
div.sidemenu li a:hover, .sidemenu ul li:hover a{background: #cccccc url('images/hover.gif') bottom center no-repeat;color:#333333;text-decoration:none;}
div.sidemenu li ul{background:#EBEBEB;display:none;height:auto;padding:0px;margin-left:200px;margin-top:-32px;border:0px;position:absolute;width:220px;z-index:200;/*top:1em;/*left:0;*/}
div.sidemenu li:hover ul{display:block;}
div.sidemenu li li {background:url('images/sub_sep.gif') bottom left no-repeat;display:block;float:none;margin:0px;padding:0px;width:220px;font-size:1.1em;}
div.sidemenu li:hover li a{background:none;}
div.sidemenu li ul a{display:block;margin:0px;padding:0px 10px 0px 15px;text-align:left;}
div.sidemenu li ul a:hover, .sidemenu li ul li:hover a{background:#cccccc url('images/hover_sub.gif') center left no-repeat;border:0px;color:#333333;text-decoration:none;}
div.sidemenu p{clear:left;}
div.sidemenu img {padding:0px 15px 5px 2px;width:25px;height:25px;}


<div class="sidemenu">
<ul>
   <li><a href="#"><img src="/icon_excel_small.jpg"><span>Excel Training</span></a>
      <ul>
         <li><a href="#"><span>Basic</span></a></li>
         <li><a href="#"><span>Intermediate</span></a></li>
         <li><a href="#"><span>Advanced</span></a></li>
      </ul>
   </li>
   <li><a href="#"><img src="/icon_access_small.jpg"><span>Access Training</span></a>
      <ul>
         <li><a href="#"><span>Basic</span></a></li>
         <li><a href="#"><span>Intermediate</span></a></li>
         <li><a href="#"><span>Advanced</span></a></li>
      </ul>
    </li>
</ul>
</div>

ご協力ありがとうございました。スティーブン

4

2 に答える 2

3

IEとの戦いをやめました。これを使用して、IE 専用の特別な CSS を追加します。そこにある 50 ピクセルを削除して、IE 用に調整できます。

<!--[if IE]> <link href="/css/ie.css" rel="stylesheet" type="text/css"> <![endif]-->
于 2012-07-09T14:26:32.160 に答える
0

これが役立つかもしれないと思います。

最上位の LI 要素でそれらを position:relative にします

サブメニューの UL 要素で、margin-left を削除し、left:200px を追加します。

于 2012-07-09T14:34:03.067 に答える