居中下拉列表

Question

I am trying to center a drop down list under the icons. They appear when hovering. This is the code:

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

This is how the CSS looks like

nav{
margin: auto;
text-align:center;
}

nav>ul>li{
margin: 30px;
display:inline-block;   
}

nav>ul>li>img{
-webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    transition: all ease 0.3s;
}

.Sublist{
display:none;
}

nav>ul>li:hover .Sublist{
display:block;
    position: absolute;
padding: 5px 10px;
background-color: #365686;
margin-left: -55px;
text-decoration: none;
z-index:99;
border: 3px solid #507ab8;
border-radius: 10px;
text-align:left;
}

nav>ul>li:hover .Sublist>li>a{
color: #fff;
text-decoration: none;
font-size: 2em;
}


nav>ul>li:hover img{
border: 5px solid #555;
border-radius: 95%;
z-index:5;

-webkit-transform: translateY(-1em);
    -moz-transform: translateY(-1em);
    -ms-transform: translateY(-1em);
transform: translateY(-1em);
}

An example of the site can be found here: http://student.howest.be/arn.vanhoutte/web/

Answer 1

.Sublist {
    display:none;
    list-style-type: none;
    padding: 0;
}

nav > ul > li:hover .Sublist {
    display:block;
    background-color: #365686;
    text-decoration: none;
    z-index:99;
    border: 3px solid #507ab8;
    border-radius: 10px;
    text-align:left;
}

Answer 2

If you want to change something, like Listpadding, you can change it here:

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

Answer 3

What you have is difficult to centre with CSS unless you know the width of each .Sublist but its trivial to do with JavaScript.

Here we measure the width of each .Sublist and offset its position to centre it:

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

DEMO: http://jsfiddle.net/7P8R6/