Question

我是HTML和CSS的新手。

我正在尝试使用下拉菜单制作导航栏。

我创建了导航栏。但是主菜单项的宽度随子菜单项而变化。

如何停止更改主菜单项的宽度。这里的主菜单项是＆＃34; SCHOOLING＆＃34;。

我不想改变SCHOOLING的宽度。

更改前

更改后

NavBar的HTML代码

<!DOCTYPE html>
<html>
<head>
    <title>Navigation</title>
    <link rel="stylesheet" type="text/css" href="nav.css">
</head>
<body>
<nav id="navbar" class="bold">
        <ul>
            <li style="border-top-left-radius:10px;border-bottom-left-radius:10px;"><a href="index.html"  style="padding-left:21px;">HOME</a></li>
            <li><a href="subject.html" >SCHOOLING</a>
                <ul>
                    <li><a href="#">HIGH SCHOOL</a></li>
                    <li><a href="#">HIGHER SECONDARY</a></li>
                </ul>
            </li>

            <li><a href="subject.html">ENGINEERING</a></li>
            <li><a href="subject.html">UG | PG</a></li>
            <li><a href="subject.html">SPECIAL CLASSES</a></li>
            <li><a href="about.html">ABOUT</a></li>
            <li style="border-right:none;"><a href="contact.html">CONTACT US</a></li>
        </ul>
    </nav>
</body>
</html>

CSS代码用于NavBar

* {
    margin: 0;
    padding: 0;
    font-family: Courier New, monospace;
    }

.fleft {
    float: left;
   }
.fright {
    float: right;
}
.clear {
    clear: both;
    }

.bold {
    font-weight: bold;
    }

/* NAV BAR */

#navbar {
   background-color: #333; 
    margin:10px;
    height: 40px;
    color: white;
    border-radius: 10px;
} 

#navbar ul {
    list-style: none;
    overflow: hidden;

}

#navbar ul li {
    float: left;
    border-right: 2px solid #dede0e;
    font-size: 1.5em;

}
#navbar ul li a {
    color: white;
        display: block;
    text-decoration: none;
        padding: 6px 10px;

}
#navbar ul li:hover {
        background-color: #000000;


}

/* DROP DOWN MENU */

#navbar ul ul {
    display: none;
    list-style: none;

    color: blueviolet;
    background: #a80000;

}
#navbar ul ul li {
    float: none;
    font-size: 1em;
    border: none;
    position: relative;
    top: 100%;
    left: 0;
}
#navbar ul ul li a {
    border-right: none;
    padding: 0 20px;
}
#navbar ul li:hover > ul
{
    display: block;
}

Answer 1

您可以通过将下拉菜单的位置设置为绝对值来实现此目的。

#navbar ul ul {
    display: none;
    list-style: none;
    color: blueviolet;
    background: #a80000;
    position: absolute;
}

如何在不更改主菜单项宽度的情况下制作下拉菜单？

1 个答案: