ドロップダウンメニューを同じ幅にするにはどうしたらいいですか？

Question

CSSでドロップダウンメニューが実装されていますが、私のサブメニューはすべて同じサイズではありません。私は、どのように問題を解決するかわからない、幅プロパティを追加する機能しないため。ここで

メニューCSSです：サブメニューは、すべての異なるサイズであるとして

.submenu { 
 
    display: none; 
 
} 
 
#navlist li:hover ul { 
 
    display: block; 
 
    /*used to block display the dropdown */ 
 
    position: absolute; 
 
    padding: 0px; 
 
    margin-top: 15px; 
 
    width: 200px; 
 
} 
 
#navlist li { 
 
    list-style: none; 
 
    margin: 0; 
 
    height: 30px; 
 
} 
 
#navlist li a { 
 
    color: #F1F6FE; 
 
    padding: 5px 15px; 
 
    margin-left: 3px; 
 
    border: 1px solid #0F3974; 
 
    border-bottom: none; 
 
    background: #2153AA url('../img/tab_bg.gif') bottom left repeat-x; 
 
    background-size: 80px 60px; 
 
    text-decoration: none; 
 
} 
 
#navlist li a:link { 
 
    color: #F1F6FE; 
 
} 
 
#navlist li a:visited { 
 
    color: #F1F6FE; 
 
} 
 
#navlist li a:hover { 
 
    color: #FFFFFF; 
 
    background: #3364BB; 
 
    border-color: #0F3974; 
 
    width: 200px; 
 
} 
 
#submenu li:hover { 
 
    display: flex; 
 
    /* display the dropdown */ 
 
    position: absolute; 
 
    padding: 0px; 
 
    margin-top: 15px; 
 
    width: 200px; 
 
}

<div id="navcontainer"> 
 
    <ul id="navlist"> 
 
    <li id="active"> 
 
     <a href="index.php" id="current">Home</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">Tools</a> 
 
     <ul class='submenu'> 
 
     <li><a href="hcm.php">HCM</a> 
 
     </li> 
 
     <li><a href="interlopers.php">Interlopers</a> 
 
     </li> 
 
     <li><a href="#">SFD</a> 
 
     </li> 
 
     <li><a href="#">Summary report</a> 
 
     </li> 
 
     <li><a href="#">Age</a> 
 
     </li> 
 

 
     </ul> 
 
    </li> 
 
    <li> <a href="#">Data</a> 
 
     <ul class='submenu'> 
 
     <li><a href="#">Catalogs</a> 
 
     </li> 
 
     <li><a href="#">Plots</a> 
 
     </li> 
 
     <li><a href="papers.php">Papers</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li> <a href="about.php">About</a> 
 
    </li> 
 
    <li> <a href="links.php">Links</a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

widthプロパティを指定してはいけません。代わりにdisplay: block;をすべてaタグに使用して内容に応じて幅を調整します。

別々の推移と非はホバリングの問題を取り除くために削除

デモmargin-topを

#navlist li ul { 
    display: none; 
    /*used to block display the dropdown */ 
    position: absolute; 
    padding: 0px; 
    margin-top: 1px; 
} 
#navlist li:hover ul { 
    display: block; 
} 

を使用して推移していないとき、それは隠し作るためにsubmenuスタイルを推移： -

.submenu { 
 
    display: none; 
 
} 
 
#navlist li ul { 
 
    display: none; 
 
    /*used to block display the dropdown */ 
 
    position: absolute; 
 
    padding: 0px; 
 
    margin-top: 1px; 
 
} 
 
#navlist li:hover ul { 
 
    display: block; 
 
} 
 
#navlist li { 
 
    list-style: none; 
 
    margin: 0; 
 
    height: 30px; 
 
} 
 
#navlist > li { 
 
    display: inline-block; 
 
} 
 
#navlist li a { 
 
    color: #F1F6FE; 
 
    padding: 5px 15px; 
 
    margin-left: 3px; 
 
    border: 1px solid #0F3974; 
 
    border-bottom: none; 
 
    background: #2153AA url('../img/tab_bg.gif') bottom left repeat-x; 
 
    background-size: 80px 60px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
#navlist li a:link { 
 
    color: #F1F6FE; 
 
} 
 
#navlist li a:visited { 
 
    color: #F1F6FE; 
 
} 
 
#navlist li a:hover { 
 
    color: #FFFFFF; 
 
    background: #3364BB; 
 
    border-color: #0F3974; 
 
} 
 
#submenu li:hover { 
 
    display: flex; 
 
    /* display the dropdown */ 
 
    position: absolute; 
 
    padding: 0px; 
 
    margin-top: 15px; 
 
}

<div id="navcontainer"> 
 
    <ul id="navlist"> 
 
    <li id="active"> 
 
     <a href="index.php" id="current">Home</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">Tools</a> 
 
     <ul class='submenu'> 
 
     <li><a href="hcm.php">HCM</a> 
 
     </li> 
 
     <li><a href="interlopers.php">Interlopers</a> 
 
     </li> 
 
     <li><a href="#">SFD</a> 
 
     </li> 
 
     <li><a href="#">Summary report</a> 
 
     </li> 
 
     <li><a href="#">Age</a> 
 
     </li> 
 

 
     </ul> 
 
    </li> 
 
    <li> <a href="#">Data</a> 
 
     <ul class='submenu'> 
 
     <li><a href="#">Catalogs</a> 
 
     </li> 
 
     <li><a href="#">Plots</a> 
 
     </li> 
 
     <li><a href="papers.php">Papers</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li> <a href="about.php">About</a> 
 
    </li> 
 
    <li> <a href="links.php">Links</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 
</div>

を