0
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>
「HTML」も追加してください。 –
@MuhammadUsman HTMLコード –
を追加しました[** Fiddle **](https://jsfiddle.net/7gnhmcvd/)を確認してください。私は多くの訂正をしました。 –