0

私はいくつかのウェブサイトプロジェクトに取り組んでおり、ホバーイベントでul要素に割り当てられた背景画像として水平サブメニューを表示する垂直メニューを作成しようとしていますが、その画像は1つの場所に固執し、他のメニュー要素のホバーイベントごとに表示されません。メインメニュー項目に対して水平に表示したい。

ここに私のHTMLコードがあります:

    <nav class="side_menu">
    <ul id="side_menu">
      <li><a href="#!/page_splash"><span></span><span></span><strong></strong><strong></strong></a></li>
      <li><a href="#!/page_home"><span>Home</span><span>welcome note</span><strong></strong><strong></strong></a></li>
      <li class="with_ul"><a href="#!/page_about"><span>About</span><span>company info</span><strong></strong><strong></strong></a>
           <ul class="side_submenu_1">
               <li><a href="#!/page_more">company</a></li>
               <li><a href="#!/page_more">team</a></li>
               <li><a href="#!/page_more">news</a></li>
               <li><a href="#!/page_more">projects</a></li>
           </ul>
       </li>
       <li class="with_ul"><a href="#!/page_folio"><span>Rent</span><span>Latest Offers</span><strong></strong><strong></strong></a>
          <ul class="side_submenu_1">
               <li><a href="#!/page_more">FOLIO</a></li>
          </ul>
        </li>
        <li><a href="#!/page_sale"><span>Sell</span><span>contact us!</span><strong></strong><strong></strong></a></li>
        <li><a href="#!/page_services"><span>services</span><span>what we do?</span><strong></strong><strong></strong></a></li>
        <li><a href="#!/page_mail"><span>contacts</span><span>contact us!</span><strong></strong><strong></strong></a></li>
  </ul>
</nav>

CSS:

.side_menu{
  position: relative; 
  display: block; 
  float: left; 
  margin-top: 0px;
  margin-left: 10px;
 }

#side_menu>li{
  display:block;
  position:relative;
}

#side_menu>li:first-child{
  display:none;
 }

#side_menu>li>a{
  display:block;
  position:relative;
  float:left;width:103px;
  height:102px;
  margin-top: -2.5px;
 }

#side_menu>li>a>span{
  display:block;
  position:relative;
  font:24px/1.2em 'Contrail One',sans-serif;
  color:#fff;
  display:block;
  padding-top:28px;
  margin-left:15px;
  letter-spacing:1px;
  z-index:2;
 }

#side_menu>li>a>span:first-child+span{
  font-size:10px;
  color:rgba(255,255,255,0.4);
  padding:0px;
  margin-top:-5px;
  letter-spacing:0;
 }

#side_menu>li:first-child>a>strong{
  display:block;
  position:relative;
  float:left;
 }

#side_menu>li:first-child+li>a>span+span+strong{
   background:url(http://edplace.com/userfiles/image/circle.gif) center no-repeat;
 }

#side_menu>li:first-child+li+li>a>span+span+strong{
   background:url(http://edplace.com/userfiles/image/circle.gif) center no-repeat;
 }

#side_menu>li:first-child+li+li+li>a>span+span+strong{
   background:url(http://edplace.com/userfiles/image/circle.gif) center no-repeat;
 }

#side_menu>li:first-child+li+li+li+li>a>span+span+strong{
   background:url(http://edplace.com/userfiles/image/circle.gif) center no-repeat;
 }

#side_menu>li:first-child+li+li+li+li+li>a>span+span+strong{
   background:url(http://edplace.com/userfiles/image/circle.gif) center no-repeat;
 }

#side_menu>li:first-child+li+li+li+li+li+li>a>span+span+strong{
   background:url(http://edplace.com/userfiles/image/circle.gif) center no-repeat;
 }

#side_menu>li>a>strong{
   display:inline-block;
   position:absolute;
   height:100%;
   width:100%;
   top:0;
   left:0;
   z-index:0;
 }

 #side_menu>li>a>span+span+strong+strong{
     background:url(../images/side_menu_bg_def.png) center no-repeat;
  }

   .side_submenu_1{
      display: none; 
      position: absolute;
      left: 50px;
      top: 0;
      width:103px;
      height:102px;
      background:url(http://www.drewmichaelblake.com/r/i/YellowCircle.png) center no-      repeat;
   }

  .side_submenu_1 li{
       position:relative;
       display:block;
       margin-bottom:4px;
   }

  .side_submenu_1 li:first-child{
       padding-top:18px;
   }

  .side_submenu_1 a{
       position:relative;
       display:block;
       font:11px/1.2em 'Contrail One',sans-serif;
       color:#615f5e;
   }

  #side_menu > li:hover .side_submenu_1{
       display:inline-block;
   }

試してみましたが、メイン メニュー項目の前にサブメニューを表示できませんでした....About と Rent タブのみのサブメニューを追加しました。これが現在のデモhttp://codepen.io/abdulwahid24/pen/Eiwkrです

4

2 に答える 2

0

実際の問題は、トップ レベルの LI が高さを持たないことです。これは、フローティング コンテンツをラップしていないためです。これを簡単に修正するには、次のように変更します。

#side_menu>li {
    display: block;
    position: relative;
}

これに：

#side_menu>li {
    display: table;
    position: relative;
}
于 2013-05-07T15:00:11.057 に答える