如何讓我的下拉菜單的寬度相同？

我有一個在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>

來源

2016-12-27 viktor.radovic

請添加'HTML'。 –

@MuhammadUsman我添加了HTML代碼 –

檢查此[** Fiddle **]（https://jsfiddle.net/7gnhmcvd/）。我做了很多更正。 –

由於子菜單都在不同的大小不指定width財產。而是全部使用display: block;a根據內容調整寬度的標記。

獨立的徘徊和非徘徊submenu風格，使其隱藏在不使用

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

刪除margin-top刪除徘徊問題

演示徘徊： -

.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>

來源

2016-12-27 16:14:05 jafarbtech

如何讓我的下拉菜單的寬度相同？

回答

相關問題