Question

我正在尝试减少下拉导航栏子菜单中项目之间的垂直空间。您可以在http://www.mirandabee.com

查看目前的状态

我试图垂直缩小空间，但无法弄明白。这是我的HTML：

<ul id ="nav">
<li><a href="http://www.mirandabee.com/search/label/About%20Me#.UuQfD-Io6Rs">About Me
<ul>
<li><a href="http://www.mirandabee.com/search/label/About%20Me#.UuQfD-Io6Rs">About Me</a></li>
<li><a href="http://www.mirandabee.com/search/label/Photo%20Projects#.UuQfROIo6Rs">Photo Album</a></li> 
</ul>
</a></li>
<li><a href="http://www.mirandabee.com/search/label/Blog%20Series#.UuPc3uIo6Rs1">Blog Series
<ul>
<li><a href="http://www.mirandabee.com/search/label/Guest%20Post%20Monday#.UuPdCuIo6Rs">Guest Post Monday</a></li>
<li><a href="http://www.mirandabee.com/search/label/Infographic%20Monday#.UuPdNuIo6Rs">Infographic Monday</a></li>
<li><a href="http://www.mirandabee.com/search/label/What%20I%20Wore%20Wednesday#.UuPdTOIo6Rs">What I Wore Wednesday</a></li>
<li><a href="http://www.mirandabee.com/search/label/Fun%20Friday%20Link%20Party#.UuPdYOIo6Rs">Fun Friday Link Party</a></li>
</ul>
</a></li>
<li><a href="http://www.mirandabee.com/search/label/Freebies#.UhDj0D92XiM">Freebies
<ul>
<li><a href="http://www.mirandabee.com/search/label/Giveaways#.UuPxHOIo6Rt">Giveaways</a></li>
<li><a href="http://www.mirandabee.com/search/label/Printables#.UuPxLeIo6Rt">Printables</a></li>
</ul>
</a></li>
<li><a href="http://www.mirandabee.com/search/label/Recipes#.UuPyGOIo6Rt">Recipes
<ul>
<li><a href="http://www.mirandabee.com/search/label/Recipes#.UuPyqOIo6Rt">All Recipes</a></li>
<li><a href="http://www.mirandabee.com/search/label/Appetizers#.UuPzHeIo6Rs">Appetizers</a></li>
<li><a href="http://www.mirandabee.com/search/label/Snacks#.UuPzM-Io6Rs">Snacks</a></li>
<li><a href="http://www.mirandabee.com/search/label/Main%20Dishes#.UuP0AuIo6Rs">Main Dishes</a></li>
<li><a href="http://www.mirandabee.com/search/label/Sides#.UuP0F-Io6Rs">Sides</a></li>
<li><a href="http://www.mirandabee.com/search/label/Drinks#.UuP0WOIo6Rs">Drinks</a></li>
<li><a href="http://www.mirandabee.com/search/label/Desserts#.UuP0aeIo6Rs">Desserts</a></li>
<li><a href="http://www.mirandabee.com/search/label/Other%20Recipes#.UuP0fOIo6Rs">Other Recipes</a></li>
</ul>
</a></li>
<li><a href="http://www.mirandabee.com/search/label/Projects%20%26%20Crafts#.UuP03OIo6Rt">Projects
<ul>
<li><a href="http://www.mirandabee.com/search/label/Home#.UuP2B-Io6Rt">For the Home</a></li>
<li><a href="http://www.mirandabee.com/search/label/Kids%20%26%20Family#.UuP2SeIo6Rt">Kids & Family</a></li>
<li><a href="http://www.mirandabee.com/search/label/Travel#.UuP2ZOIo6Rt">Travel Solutions</a></li>
<li><a href="http://www.mirandabee.com/search/label/Gifts#.UuP2jeIo6Rt">Gift Ideas</a></li>
<li><a href="http://www.mirandabee.com/search/label/Other%20Projects#.UuP2pOIo6Rs">Other</a></li>
</ul>
</a></li>
<li><a href="http://www.mirandabee.com/search/label/Organize%20Your%20Life#.UuP2yuIo6Rt">Organization
<ul>
<li><a href="http://www.mirandabee.com/search/label/One%20Space%20at%20a%20Time#.UuP28OIo6Rt">One Space at a Time</a></li>
</ul>
</a></li></ul>

CSS：

/* ----- NAVMENU ----- */
#nav, #nav ul {
    padding: 0px;
    margin: 0;
z-index: 999;
margin-top: -80px;
margin-left: 100px;
    list-style: none;
color: #007581;
}

#nav a {
    display: block;
    width: 6.5em;
}
#nav li {
    float: left;
    width: 6.5em;
font-size:18px;
color: #ff6962
}

#nav li ul {
    position: absolute;
    width: 6em;
font-size: 5px;
    left: -999em;
}

#nav li:hover ul {
left: auto;
width: 7em;
font-size:18px;
color: #ff6962;
margin-left: -2px;
padding-top:-112px;
}

sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

#nav li:hover ul, #nav li.sfhover ul {
    left: auto;
}

请记住，我是一个非常初学者，但我很感激我能得到的任何帮助。非常感谢！

Answer 1

您的HTML完全被破坏了。

<a><ul><li><a>...</a></li></ul></a>

你不能在这样的锚内锚定锚。你的CSS也没有多大意义。您已经position: absolute，但在其他地方没有position: relative，因此所有嵌套的<ul>都将出错。

Answer 2

您的HTML结构不好。我很遗憾地说。但在这里，我试着为你解决它。

Fiddle

HTML：

<ul id="nav">
            <li>
                <a href="http://www.mirandabee.com/search/label/About%20Me#.UuQfD-Io6Rs">About Me</a>
                <ul>
                    <li><a href="http://www.mirandabee.com/search/label/About%20Me#.UuQfD-Io6Rs">About Me</a></li>
                    <li><a href="http://www.mirandabee.com/search/label/Photo%20Projects#.UuQfROIo6Rs">Photo Album</a></li> 
                </ul>
            </li>
            <li>
                <a href="http://www.mirandabee.com/search/label/Blog%20Series#.UuPc3uIo6Rs1">Blog Series</a>
                <ul>
                    <li><a href="http://www.mirandabee.com/search/label/Guest%20Post%20Monday#.UuPdCuIo6Rs">Guest Post Monday</a></li>
                    <li><a href="http://www.mirandabee.com/search/label/Infographic%20Monday#.UuPdNuIo6Rs">Infographic Monday</a></li>
                    <li><a href="http://www.mirandabee.com/search/label/What%20I%20Wore%20Wednesday#.UuPdTOIo6Rs">What I Wore Wednesday</a></li>
                    <li><a href="http://www.mirandabee.com/search/label/Fun%20Friday%20Link%20Party#.UuPdYOIo6Rs">Fun Friday Link Party</a></li>
                </ul>
            </li>
            <li><a href="http://www.mirandabee.com/search/label/Freebies#.UhDj0D92XiM">Freebies</a>
                <ul>
                    <li><a href="http://www.mirandabee.com/search/label/Giveaways#.UuPxHOIo6Rt">Giveaways</a></li>
                    <li><a href="http://www.mirandabee.com/search/label/Printables#.UuPxLeIo6Rt">Printables</a></li>
                </ul>
            </li>
            <li><a href="http://www.mirandabee.com/search/label/Recipes#.UuPyGOIo6Rt">Recipes</a>
                <ul>
                    <li><a href="http://www.mirandabee.com/search/label/Recipes#.UuPyqOIo6Rt">All Recipes</a></li>
                    <li><a href="http://www.mirandabee.com/search/label/Appetizers#.UuPzHeIo6Rs">Appetizers</a></li>
                    <li><a href="http://www.mirandabee.com/search/label/Snacks#.UuPzM-Io6Rs">Snacks</a></li>
                    <li><a href="http://www.mirandabee.com/search/label/Main%20Dishes#.UuP0AuIo6Rs">Main Dishes</a></li>
                    <li><a href="http://www.mirandabee.com/search/label/Sides#.UuP0F-Io6Rs">Sides</a></li>
                    <li><a href="http://www.mirandabee.com/search/label/Drinks#.UuP0WOIo6Rs">Drinks</a></li>
                    <li><a href="http://www.mirandabee.com/search/label/Desserts#.UuP0aeIo6Rs">Desserts</a></li>
                    <li><a href="http://www.mirandabee.com/search/label/Other%20Recipes#.UuP0fOIo6Rs">Other Recipes</a></li>
                </ul>
            </li>
            <li><a href="http://www.mirandabee.com/search/label/Projects%20%26%20Crafts#.UuP03OIo6Rt">Projects</a>
                <ul>
                    <li><a href="http://www.mirandabee.com/search/label/Home#.UuP2B-Io6Rt">For the Home</a></li>
                    <li><a href="http://www.mirandabee.com/search/label/Kids%20%26%20Family#.UuP2SeIo6Rt">Kids & Family</a></li>
                    <li><a href="http://www.mirandabee.com/search/label/Travel#.UuP2ZOIo6Rt">Travel Solutions</a></li>
                    <li><a href="http://www.mirandabee.com/search/label/Gifts#.UuP2jeIo6Rt">Gift Ideas</a></li>
                    <li><a href="http://www.mirandabee.com/search/label/Other%20Projects#.UuP2pOIo6Rs">Other</a></li>
                </ul>
            </li>
            <li><a href="http://www.mirandabee.com/search/label/Organize%20Your%20Life#.UuP2yuIo6Rt">Organization</a>
                <ul>
                    <li><a href="http://www.mirandabee.com/search/label/One%20Space%20at%20a%20Time#.UuP28OIo6Rt">One Space at a Time</a></li>
                </ul>
            </li>
</ul>

CSS：

    /* ----- NAVMENU ----- */
    #nav, #nav ul {
        padding: 0px;
        margin: 0;
        z-index: 999;
        margin-top: 0px;
        margin-left: 100px;
        list-style: none;
        color: #007581;
    }

    #nav a {
        display: block;
        width: 6.5em;
    }
    #nav li {
        float: left;
        width: 6.5em;
        font-size:18px;
        color: #ff6962
    }

    #nav li ul {
        position: absolute;
        width: 6em;
        font-size: 5px;
        left: -999em;
    }

    #nav li:hover ul {
        left: auto;
        width: 7em;
        font-size:18px;
        color: #ff6962;
        margin-left: -2px;
        padding-top:-112px;
    }

    #nav li:hover ul, #nav li.sfhover ul {
        left: auto;
    }

我希望它能帮助你解决这个问题.. :)

子菜单项之间的CSS空间

2 个答案: