親ナビゲーションと同じ幅のドロップダウンナビゲーション

Question

"width：100％;"ドロップダウン要素はページ全体と同じ幅になります。私は浮動小数点数で作業しているので、多分別のアプローチが必要でしょうか？

私は似たような質問をしましたが、そこには解決策はありませんでした。誰かが私が間違っているのを見ることができますか？あなたはすべてのコードhereでjsfiddleを見つけることができます。私は現在、固定幅の問題を "解決"しています。ここで

はナビのためのHTMLです：

<nav role="navigation" class="navi"> 
      <ul class="nav-elements"> 
       <li><a href="./index.html" title="The Homepage of Story Bat" class="current" tabindex="1">Home</a></li> 
       <li><a href="./active-stories/index.html" title="Active Stories" tabindex="2">Ongoing Stories</a> 
        <ul> 
         <li><a href="" title="">Sublink</a></li> 
         <li><a href="" title="">Another Sublink with a long text</a></li> 
        </ul> 
       </li> 
       <li><a href="./sleeping-stories/index.html" title="Sleeping Stories" tabindex="3">Sleeping Stories</a> 
        <ul> 
         <li><a href="" title="">Sublink</a></li> 
         <li><a href="" title="">Another Sublink</a></li> 
        </ul> 
       </li> 
       <li><a href="./news/index.html" title="Updates about Story Bat" tabindex="4">News</a></li> 
       <li><a href="./about-faq/index.html" title="Information about Story Bat" tabindex="5">About/FAQ</a></li> 
      </ul> 
     </nav> 

とCSS：

.navi { 
    float: left; 
    margin-bottom: 0.5em; 
} 
.navi ul { 
    padding-left: 0; /* Navi aligned left */ 
    margin: 0; 
} 
.navi li { 
    background: #808080; 
    float: left; 
    padding: 0.2em 0.8em 0.2em 0.8em; 
    border: 1px solid black; 
    margin: 0 0.4em 0.4em 0; 
    list-style: none; 
    font-size: 1.2em; 
    border-radius: 10px; 
} 
/* nav-elements for dropdown-menus */ 
.nav-elements ul { 
    margin-top: 0.2em; 
    padding: 7px 10px 0 0; 
} 
.nav-elements li ul { 
    position: absolute; 
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */ 
    z-index: 1000; 
    width: 9.25em; 
    margin-left: -0.85em; /* to counter the padding in .navi li */ 
} 
.nav-elements li:focus, 
.nav-elements li:hover { /* main navi gets shadow while dropdown is active */ 
    text-shadow: 0 0 7px rgba(255,255,255,.5); /* kind of a glow effect */ 
} 
.nav-elements li:focus ul, /* show the submenu when user focues (e.g. via tab) the parent li [doesn't work?]*/ 
.nav-elements li:hover ul { /* show the submenu when user hovers over the parent li */ 
    left:auto; /* Bring back on-screen when needed */ 
    text-shadow: none; /* dropdown doesn't inherit shadow from main-navi*/ 
} 
.nav-elements ul li { 
    float: none; 
    font-size: .9em; 
} 

Answer 1

をあなたがしてご確認ください固定幅を使用したくないあなたの問題によると、私のUpdted fiddle

width:100%を使用していますので、親ulに応じて変更されます。あなたが必要とするのは幅：100％とposition:relativeまたは親li（.navi li）を変更して余分な部分を削除すると結果が得られます。私が使用してきたように

更新 position:relativeので、幅：あなたは私がwidth:101%を使用している回避策のためにこれだけの2ピクセルのギャップが欠落しているように、100は、国境の内側の幅を取っています。更新されたフィドルを確認してください。

あなたが必要とするものがあれば教えてください。ありがとうございました:)

Answer 2

2番目のUL要素は、ちょうどその周りli要素として広くすることができます。この方法を試してください。

#subMenuFoo { 
 
    display: none; 
 
} 
 

 
#foo:hover ~ #subMenuFoo { 
 
    display: block; 
 
}

<div class="nav-elements"> 
 
    <a href="" id="foo">foo</a> 
 
    <div id="subMenuFoo"> 
 
    <a href="">bar</a> 
 
    </div> 
 
</div>

- 気にしてくださいギャップ