Html 居中下拉列表

我正在尝试将下拉列表居中放置在图标下方。它们在悬停时出现。代码如下：

    <nav>
        <ul>
            <li><img src="images/menu/stadhuis.svg" alt="Stadhuis" height="80" width="80">
            <ul class="Sublist">
            <li><a href="#">Onthaal</a></li>
            <li><a href="#">Algemene dienst</a></li>
            <li><a href="#">Ruimtelijke ordening</a></li>
            <li><a href="#">Burger en welzijn</a></li>
            <li><a href="#">Financiele zaken</a></li>
            <li><a href="#">Mobiliteit</a></li>
            <li><a href="#">Technische zaken</a></li>
            </ul></li>

            <li><img src="images/menu/bestuur.svg" alt="Bestuur" height="80" width="80">
            <ul class="Sublist">
            <li><a href="#">Gemeenteraad</a></li>
            <li><a href="#">College van Burgemeester en Schepenen</a></li>
            <li><a href="#">Stadssecretaris</a></li>
            <li><a href="#">Adviesraad</a></li>
            <li><a href="#">Jaarverslag</a></li>
            <li><a href="#">Sociaal beleidsplan</a></li>
            </ul></li>

            <li><img src="images/menu/diensten.svg" alt="Diensten" height="80" width="80">
            <ul class="Sublist">
            <li><a href="#">Politie</a></li>
            <li><a href="#">Brandweer</a></li>
            <li><a href="#">OCMW</a></li>
            <li><a href="#">Onderwijs</a></li>
            <li><a href="#">Toerisme</a></li>
            </ul></li>

            <li><img src="images/menu/vrijetijd.svg" alt="Vrije tijd" height="80" width="80"><ul class="Sublist">
            <li><a href="#">Sport</a></li>
            <li><a href="#">Bibliotheken</a></li>
            <li><a href="#">Jeugd</a></li>
            <li><a href="#">Feest</a></li>
            <li><a href="#">Muziek</a></li>
            <li><a href="#">Kunst</a></li>
            <li><a href="#">Verenigingen</a></li>
            </ul></li>

            <li><img src="images/menu/economie.svg" alt="Economie" height="80" width="80"><ul class="Sublist">
            <li><a href="#">Lokale economie</a></li>
            <li><a href="#">Landbouw</a></li>
            <li><a href="#">Vacatures</a></li>
            <li><a href="#">Openbare markt</a></li>
            </ul></li>

            <li><img src="images/menu/milieu.svg" alt="Milieu" height="80" width="80"><ul class="Sublist">
            <li><a href="#">Groen</a></li>
            <li><a href="#">Landbouw</a></li>
            <li><a href="#">Openbare onderzoeken</a></li>
            <li><a href="#">Premies</a></li>
            </ul></li>          
        </ul>
    </nav>

---

可以在此处找到该站点的一个示例：

如果要更改某些内容，如Listpadding，可以在此处进行更改：

.Sublist li  {
 /* do some changes here like */
  padding: 10px;
}

---

除非您知道每个

.Sublist

的宽度，否则很难将CSS作为中心，但使用JavaScript则很简单

在这里，我们测量每个

子列表的宽度，并将其位置偏移到中心位置：

<script type="text/javascript">
    //get an array of all the sublists
    var sublists = document.getElementsByClassName("Sublist");
    //for each item in this array:
    for (var i = 0; i < sublists.length; i++) {
        // get this specific sublist
        var sublist = sublists[i];
        // temporarily make the element visible so JS can get its width
        sublist.style.display = "block";
        // now we know its width we can calculate the margin required to center it
        // which is half its width minus half the width of its parent li
        var marginLeft = Math.floor(sublist.offsetWidth / 2) - Math.floor(sublist.parentNode.offsetWidth / 2);
        // set the left margin
        sublist.style.marginLeft = "-"+marginLeft+"px";
        //remove the display property to re-hide
        sublist.style.display = "";
    }
</script>


//获取所有子列表的数组
var Sublist=document.getElementsByClassName（“Sublist”）；
//对于此数组中的每个项目：
对于（变量i=0；i

演示：

.Sublist li  {
 /* do some changes here like */
  padding: 10px;
}

<script type="text/javascript">
    //get an array of all the sublists
    var sublists = document.getElementsByClassName("Sublist");
    //for each item in this array:
    for (var i = 0; i < sublists.length; i++) {
        // get this specific sublist
        var sublist = sublists[i];
        // temporarily make the element visible so JS can get its width
        sublist.style.display = "block";
        // now we know its width we can calculate the margin required to center it
        // which is half its width minus half the width of its parent li
        var marginLeft = Math.floor(sublist.offsetWidth / 2) - Math.floor(sublist.parentNode.offsetWidth / 2);
        // set the left margin
        sublist.style.marginLeft = "-"+marginLeft+"px";
        //remove the display property to re-hide
        sublist.style.display = "";
    }
</script>