Html CSS下拉列表，不从父级向下对齐_Html_Css

Html CSS下拉列表，不从父级向下对齐

html css

Html CSS下拉列表，不从父级向下对齐,html,css,Html,Css,我对CSS导航栏的对齐有问题，即使我已经指定所有规则都应该恢复为零正文{ 保证金：0；填充：0； } 导航{ 位置：固定；排名：0；左：0；宽度：100%；高度：100px；填充：10px 100px；框大小：边框框；过渡：.3s； } 导航黑色{ 背景：rgba（0,0,0,0.8）；高度：100px；填充：10px 100px； } 导航标志{ 填充：22px 20px；高度：80px；浮动：左；字体大小：24px；过渡：.3s； } 导航。黑色。标志{ 颜色

我对CSS导航栏的对齐有问题，即使我已经指定所有规则都应该恢复为零

正文{
保证金：0；
填充：0；
}
导航{
位置：固定；
排名：0；
左：0；
宽度：100%；
高度：100px；
填充：10px 100px；
框大小：边框框；
过渡：.3s；
}
导航黑色{
背景：rgba（0,0,0,0.8）；
高度：100px；
填充：10px 100px；
}
导航标志{
填充：22px 20px；
高度：80px；
浮动：左；
字体大小：24px；
过渡：.3s；
}
导航。黑色。标志{
颜色：#ffffff；
}
导航ul{
列表样式：无；
浮动：对；
保证金：0；
填充：0；
显示器：flex；
}
海军ulli a{
列表样式：无；
利润率：20px；
}
海军ulli a{
线高：80px；
颜色：#151515；
文字装饰：无；
文本转换：大写；
过渡：.3s；
}
海军黑色航空母舰{
颜色：#ffffff；
}
海军ulli a：焦点{
大纲：无；
列表样式：无！重要；
}
主动导航{
颜色：#ee0000；
}
a:悬停{
列表样式：无！重要；
文字装饰：无！重要；
}
ulli ulli{
显示：无；
}
ul li：悬停ul li{
显示：块；
}
.下拉列表{
全部：未设置；
左：自动；
右：0；
右边距：-10px；
边缘顶部：30px；
浮动：左；
}


影迷
标志

试试这个

正文{
保证金：0；
填充：0；
}
导航{
位置：固定；
排名：0；
左：0；
宽度：100%；
高度：100px；
填充：10px 100px；
框大小：边框框；
过渡：.3s；
}
导航黑色{
背景：rgba（0,0,0,0.8）；
高度：100px；
填充：10px 100px；
}
导航标志{
填充：22px 20px；
高度：80px；
浮动：左；
字体大小：24px；
过渡：.3s；
}
导航。黑色。标志{
颜色：#ffffff；
}
导航ul{
列表样式：无；
浮动：对；
保证金：0；
填充：0；
显示器：flex；
}
海军ulli a{
列表样式：无；
利润率：20px；
}
海军ulli a{
线高：80px；
颜色：#151515；
文字装饰：无；
文本转换：大写；
过渡：.3s；
}
海军黑色航空母舰{
颜色：#ffffff；
}
海军ulli a：焦点{
大纲：无；
列表样式：无！重要；
}
主动导航{
颜色：#ee0000；
}
a:悬停{
列表样式：无！重要；
文字装饰：无！重要；
}
.下拉列表{
显示：无；
}
ulli：悬停{
文本对齐：右对齐；
}
鼠标悬停。下拉列表{
列表样式：无；
浮动：对；
显示器：flex；
柔性流动：柱状nowrap；
文本对齐：右对齐；
宽度：100%；
}


影迷
标志

尝试以下方法：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Picture Lover</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="assets/main.css" />
    <script src="assets/main.js"></script>
    <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>
<body>
    <header class="nav-header">
        <nav>
            <div class="logo">logo</div> 
            <ul>
                <li><a href="#" class="active">Projects</a>
                <ul>                    
                    <li><a class="dropdown" href="#">Nature pictures</a></li>
                    <li><a class="dropdown" href="#">Animal pictures</a></li>
                    <li><a class="dropdown" href="#">Other pictures</a></li>
                </ul>
                </li>
                <li><a href="#">About Me</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

之所以会发生这种情况，是因为您在hover上显示的元素是相对定位的，当然，它是根据html中的标记添加的，例如项目旁边的标记。这与将all设置为unset无关。我建议不要使用

all

，因为它没有

您可以在下面找到代码的工作副本

正文{
保证金：0；
填充：0；
}
导航{
位置：固定；
排名：0；
左：0；
宽度：100%；
高度：100px；
填充：10px 100px；
框大小：边框框；
过渡：.3s；
}
导航黑色{
背景：rgba（0,0,0,0.8）；
高度：100px；
填充：10px 100px；
}
导航标志{
填充：22px 20px；
高度：80px；
浮动：左；
字体大小：24px；
过渡：.3s；
}
导航。黑色。标志{
颜色：#ffffff；
}
导航ul{
列表样式：无；
浮动：对；
保证金：0；
填充：0；
显示器：flex；
位置：相对位置；
}
海军ulli a{
列表样式：无；
利润率：20px；
}
海军ulli a{
线高：80px；
颜色：#151515；
文字装饰：无；
文本转换：大写；
过渡：.3s；
}
海军黑色航空母舰{
颜色：#ffffff；
}
海军ulli a：焦点{
大纲：无；
列表样式：无！重要；
}
主动导航{
颜色：#ee0000；
}
a:悬停{
列表样式：无！重要；
文字装饰：无！重要；
}
ulli ulli{
显示：无；
}
ul li：悬停ul li{
显示：块；
}
.下拉式容器{
位置：绝对位置；
对齐项目：居中；
证明内容：中心；
弯曲方向：立柱；
}
.下拉列表{
全部：未设置；
左：自动；
右：0；
右边距：-10px；
边缘顶部：30px；
浮动：左；
}


影迷
标志

对于此类菜单，您通常希望绝对定位您的子菜单……非常感谢您宝贵的回答！我已经删除了“所有：未设置”，它的工作完美无瑕。再次感谢。p、奇怪的是，该函数存在，但不受支持。谢谢！它是有效的，这才是最重要的。然而，我试图把它弄得一团糟，却找不到办法来消除链接之间的空间。高度函数不起作用

body {
    margin: 0;
    padding: 0;
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    padding:  10px 100px;
    box-sizing: border-box;
    transition: .3s;
}

nav.black {
    background: rgba(0, 0, 0, 0.8);
    height: 100px;
    padding: 10px 100px;
}

nav .logo {
    padding: 22px 20px;
    height: 80px;
    float: left;
    font-size: 24px;
    transition: .3s;
}

nav.black .logo {
    color: #ffffff;
}

nav ul {
    list-style: none;
    float: right;
    margin: 0;
    padding: 0;
    display: flex;
}

nav ul li {
  position: relative;
}

nav ul li a{
    list-style: none;
    margin: 20px;
}

nav ul li a {
    line-height: 80px;
    color: #151515;
    text-decoration: none;
    text-transform: uppercase;
    transition: .3s;
}

nav.black ul li a {
    color: #ffffff;
}

nav ul li a:focus{
    outline: none;
    list-style: none!important;
}

nav ul li a.active {
    color: #ee0000;
}
a:hover {
    list-style: none!important;
    text-decoration: none!important;
}

ul li ul {
    display: none;
    position: absolute;
    top: 40px;
    left: 0;
}

ul li:hover ul {
    display: block;
}

.dropdown {
    all: unset; 
    left:auto;
    right:0;
    margin-right:-10px;
    margin-top: 30px;
    float: left;   
}