Question

我试图将下拉列表置于图标下方。它们在悬停时出现。这是代码：

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

这就是CSS的样子

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);
}

可以在此处找到该网站的示例：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

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

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

Answer 3

你所拥有的内容很难以CSS为中心，除非你知道每个.Sublist的宽度，但它与JavaScript有关。

在这里，我们测量每个.Sublist的宽度并偏移其位置以使其居中：

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

居中下拉列表

3 个答案: