0

サブメニューを親と同じ行に表示/表示することができません。マウスオーバーで表示される透明なバンド内に配置したい。私はこれに慣れていないので、アドバイスをいただければ幸いです。

Jsfiddle: http://jsfiddle.net/kn4Jx/

Exhibition には、Current と Previous の 2 つのリンクを含むサブメニューが必要です。

html:

<div>
  <ul id="mainmenu">
    <li id="liHome">
      <a href="#item-x1y1" class="maintextcolour" rel="none" id="Home">INFO</a>
    </li>
    <li id="liServices" class="active">
      <a href="#item-x1y2" class="maintextcolour" rel="SubMenuY2"             id="Services">EXHIBITIONS</a>
    <ul id="SubMenuY2" class="submenu">
     <li><a href="#" class="maintextcolour">CURRENT</a></li>
     <li><a href="#" class="maintextcolour">PREVIOUS</a></li>
    </ul> 
    </li>
    <li id="liEnvironment">
      <a href="#item-x1y3" class="maintextcolour" rel="none" id="Environment">CV</a>
    </li> 
    <li id="liCareer">
      <a href="#item-x1y4" class="maintextcolour" rel="none" id="Career">NEWS</a>
    </li>
    <li id="liContact">
      <a href="#item-x1y5" class="maintextcolour" rel="none" id="Contact">MORE</a>
    </li>
    </ul
</div>

そしてCSS：

  body 
  {
   background-color:#06F;background-size: 100%;
   background-repeat:no-repeat;
  }

  #mainmenu
  {
   margin: 0;
   padding: 0; 
   list-style-type: none;
   position:relative;
   }

   #mainmenu li 
   {
    clear: left;
    position:relative;
   }

   #mainmenu a 
   {
    display: block;
    overflow: hidden;
    float: left;
    width:100%;
    position:relative;   
   }

    #mainmenu a:hover
   {   
    background-position: 0 0;   
    background-color:clear;   
    background-color:rgba(255,255,255,0.5);   
    width:100%;
   }

   #mainmenu li.active a 
   {   
    background-position: 0 0;   
    background-color:clear;
    width:100%;
   }

   .submenu 
   {   
    list-style-type: none;    
    float: left;   display: none;  
    position:absolute;   
    right:900px;   
    top:0px;
   }

   #mainmenu li a:hover+.submenu, .submenu:hover 
   {  
    display:inline-block;
   } 

  .submenu li 
  {
   display: inline;    
   clear: none !important;
  }

  .submenu li a 
  {   
   float: right;   
   margin-left: 10px;
  }

  .maintextcolour 
  {     
   font-family: Arial, Helvetica, sans-serif;
   font-size: 24px;     
   color:#FFF;  
   text-decoration: none; 
  }

  .maintextcolour:hover 
  {     
   font-family: Arial, Helvetica, sans-serif;
   font-size: 24px;     
   color:#0FF;  
   text-decoration: none; 
  }
4

1 に答える 1

0

2 つの小さな間違い:

  1. .submenu絶対に配置されrightて いる900pxので、モニターの隣のどこかにあります。rightからに変更 しleft、番号900pxをに変更します120px
  2. inline-block.submenu のリスト項目は、代わりに次のように表示する必要がありますinline

JSFiddle: http://jsfiddle.net/kn4Jx/4/

于 2013-06-30T08:08:41.057 に答える