Question

这是我第一次尝试创建一个下拉菜单，所以请原谅任何糟糕的编码。

我想要一个10px的边框半径，它似乎只能在导航菜单的右侧工作。半径尚未应用于左侧。我需要做些什么才能纠正这个问题？

下拉菜单也无法正常工作。菜单下方有空白区域。这不允许鼠标悬停在子菜单链接上。看来这个问题是由nav ul的上边距引起的。我想在页面顶部之间留出空间。

提前致谢。

<!DOCTYPE HTML>

<html>

    <head>
        <title>Simple Drop Down Menu</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style2.css">
    </head>

    <body>

    <div class="wrapper">

        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Web Design</a>
                    <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">JavaScript</a></li>
                    </ul>
                </li>
                <li><a href="#">Content Management</a>
                    <ul>
                        <li><a href="#">Joomla</a></li>
                        <li><a href="#">Drupal</a></li>
                        <li><a href="#">WordPress</a></li>
                        <li><a href="#">Concrete 5</a></li>
                    </ul>
                </li>
                <li><a href="#">Contact</a>
                    <ul>
                        <li><a href="#">General Enquiries</a></li>
                        <li><a href="#">Ask me a Question</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

    <div class="main">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    </div>

    </body>

</html>

header, div, footer, aside, nav, article, figure, figcaption {
    display: block;}
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, form, a, fieldset, input, th, td {  
    margin: 0; padding: 0; border: 0; outline: none;} 
.wrapper{
    width: 960px; 
    margin: 0px auto;}
nav{
    height: 38px; 
    font-family: Verdana;
    background-color: #196CE8;
    border-radius: 10px;}
nav ul {
    padding: 0px; 
    margin: 0px; 
    list-style: none; 
    margin-top: 20px} 
nav li {
    float: left;
    border-right: 1px solid #ffffff;
    }
nav li ul {
    display: none;} 
nav li a { 
    display: block; 
    background: #196CE8; 
    padding: 8px 15px;
    text-decoration: none; 
    color: white;} 
nav li a:hover {
    background: #1F3D99;}   
li:hover ul {
    display: block; 
    position: absolute;} 
li:hover li {
    float: none;} 
li:hover a {
    background: #196CE8;} 
li:hover li a:hover {
    background: #1F3D99;} 
.main{
    clear: both;}
p{
    padding-top: 30px;}

Answer 1

我希望这个答案对你有用。

如前所述，<nav>的左角未显示为圆角的原因是因为其中的导航链接没有圆角，但确实有背景颜色。因此，最左侧导航链接角落的背景溢出<nav>，覆盖其圆角。

关于使下拉列表无法使用的额外空白区域，这是因为您设置了CSS样式：

nav ul{
    margin-top: 20px;
}

此保证金不仅会影响<ul>的直接子项的<nav>元素，还会影响所有后续子项（包括下拉<ul>元素，这些元素会将它们按下并创建差距很大。

毫无疑问，有几种方法可以解决这个问题，所以请随意尝试不同的解决方案。通过修改几个现有的样式定义，这是我能想到的一种方式：

nav {
    height: 38px;
    font-family: Verdana;
    background-color: #196CE8;
    border-radius: 10px;
    padding-left:10px;
}

nav li ul {
    margin: 0px;
    display: none;
}

这是一个JSFiddle，向您展示这是如何实现的。希望这是你想要的！如果没有，请告诉我，我将很乐意进一步提供帮助。快乐的编码！

导航菜单 - 边界半径＆amp;下拉菜单问题

1 个答案: