CSS 下拉菜单教程 line25.com 不适合我-6ren

CSS 下拉菜单教程 line25.com 不适合我

转载作者：太空宇宙更新时间：2023-11-04 03:08:47

25

4

我是网页设计和编程的新手，我一直在尝试制作一个博客页面作为一种自学元素。除了探索功能和自己解决问题之外，我在这一点上没有特别的目标，所以基本上我在这一点上是从零知识开始操作的。我找到了 this据称最终结果的下拉菜单教程 this .我首先在我的博客页面元素上尝试了它，但它没有用，所以，我决定逐行查看说明以复制效果，并希望在此过程中发现我第一次尝试时出错的地方.我已经完全按照说明进行操作，包括颜色和所有样式，但它仍然不适合我!菜单不会下拉。我正在使用 notepad++ 并在 firefox 上从 notepad++ 运行代码。下面是我的 html 和 css 文件。如果有人能告诉我哪里出错了，我将不胜感激。

    <html>
    <head>
        <link rel='stylesheet' href='layout.css'/>
    </head>
<nav>
        <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Tutorials</a></li>
                        <ul>
                                <li><a href="#">Photoshop</a></li>
                                <li><a href="#">Illustrator</a></li>
                                <li><a href="#">Web Design</a></li>
                                        <ul>
                                                <li><a href="#">HTML</a></li>
                                                <li><a href="#">CSS</a></li>
                                        </ul>
                                </li>       
                        </ul>
                </li>
                <li><a href="#">Articles</a></li>
                        <ul>
                                <li><a href="#">Web Design</a></li>
                                <li><a href="#">User Experience</a></li>
                        </ul>
                </li>
                <li><a href="#">Inspiration</a></li>
        </ul>
</nav>
</html>

CSS:

nav ul ul {
    display:none;
}
        nav ul li:hover > ul {
            display: block;
        }

nav ul {
    background: #efefef;
    background: linear-gradient(top, #efefef 0%, #bbbbb 100%);
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbb 100%);
    background: -webkit-linear-gradient(top, #efefef 0%, #bbbbb 100%);
    box-shadow: 0px 0px 9px rgba (0,0,0,0.15);
    padding: 0 20px;
    border-radius: 10px;
    list-style: none;
    position: relative;
    display: inline-table
}

        nav ul:after {
                content: ""; clear: both; display: block
        }

nav ul li {
    float: left;
}
        nav ul li:hover {
            background: #4b545f;
            background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
            background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
            background: -webkit-linear-gradientlinear-gradient(top, #4f5964 0%, #5f6975 40%);
        } 
                nav ul li:hover a{
                    color: #ff
                }
        nav ul li a {
            display: block; padding: 25px 40px;
            color: #757575; text-decoration: none;
        }

nav ul ul {
    background: #5f6975; border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
}
        nav ul ul li {
            float: none;
            border-top: 1px solid #6b727c;
            border-bottom: 1px solid #575f6a;
            position: relative;
        }
                nav ul ul li a {
                    padding: 15px 40px;
                    color: #fff;
                }
                        nav ul ul li a:hover {
                            background: #4b545f;
                        }

    nav ul ul ul {
        position: absolute; left: 100%; top:0;
    }

最佳答案

主要问题出在关闭 li 标签的 html 代码中“教程”和“文章”。

这些是一个完整的元素，在包含子列表之前不得关闭。

举个例子:

改变:

<li><a href="#">Tutorials</a></li>
    <ul>
        <li><a href="#">Photoshop</a></li>
        <li><a href="#">Illustrator</a></li>
        <li><a href="#">Web Design</a></li>
            <ul>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
            </ul>
        </li>       
    </ul>
</li>

收件人:

<li><a href="#">Tutorials</a>
    <ul>
        <li><a href="#">Photoshop</a></li>
        <li><a href="#">Illustrator</a></li>
        <li><a href="#">Web Design</a>
            <ul>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
            </ul>
        </li>
    </ul>
</li>

关于CSS 下拉菜单教程 line25.com 不适合我，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29926973/

25

4

0

文章推荐： html - 无法在手机中将新闻稿的文本居中

文章推荐： javascript - 为不同类型的客户端创建干净且标准的 API

文章推荐： Javascript 从嵌套函数返回值

文章推荐： c - 用于引导加载程序设置的链接器文件 vector 表

Java 8 流 : How to read lines between two lines specified by line content
当前问题陈述的输入是 - 输入.txt #START_OF_TEST_CASES #DATA key1:VA1 key2:VA2 key3:VA3 key4:VA4 key5:VA5 #DEND #E
php - 注意 : . .. Unknown on line 0 - How to find correct line, it's NOT "line 0"
编辑:添加了 PDO 调用。这是实际的错误: Notice: Object of class PDOStatement could not be converted to int in Unknow
git - 有没有办法让 git show lines added, lines changed and lines removed？
“git diff --stat”和“git log --stat”显示如下输出: $ git diff -C --stat HEAD c9af3e6136e8aec1f79368c2a6164e56
java - 将 Files.lines 与 .map(line -> line.split ("multiple delimiters")) 一起使用
我有一个具有以下格式的输入文件:安大略省:布兰普顿:北纬 43° 41':西经 79° 45'安大略省:多伦多:北纬 43° 39':西经 79° 23'魁北克省:蒙特利尔:北纬 45° 30':西经
python - 为什么 line != "\n"或 line != "\r\n"或 line ! ="\r"无法过滤空行？
空白行仅包含\n或\r\n或\r。 tempfile = open(file,"r") for id,line in enumerate(tempfile): if(line != "\n"
lines - 如何去除 BABYLON Lines 上的光效
我尝试使用 BABYLON.js 开发棋盘游戏我有一个板子和一个 ArcRotateCamera。我的灯是 HemisphericLight 当我在板上画线时，我希望这些线具有相同的外观。现在，当我
lines - 如何去除 BABYLON Lines 上的光效
我尝试使用 BABYLON.js 开发棋盘游戏我有一个板子和一个 ArcRotateCamera。我的灯是 HemisphericLight 当我在板上画线时，我希望这些线具有相同的外观。现在，当我
linux - "$line"和 "^$line"有什么区别
有一个while read循环: while read line; do grep "^$line" file1 done < target 我应该使用 "^$line" 来获得正确答案。我想
python : How to fill an array line by line?
我有一个我无法解决的 numpy 问题。我有填充 0 和 1 的 3D 数组 (x,y,z)。例如，z 轴上的一个切片: array([[1, 0, 1, 0, 1, 1, 0, 0],
javascript - 如何迭代 "line-by-line"npm 中的所有行？
作为临时方法，我使用 .txt 文件来存储程序的某些变量。写入与 fs.appendFile 完美配合，但考虑到它的大小，使用 fs.readFile 读取不合适 - 我想得到某一行来自文件，以及
rstudio - R-调试: line by line through a loop
我试图找到一种通过R studio进行调试的方法，但是我发现的所有解决方案都无法真正起作用。 1.)CTRL + enter:有效，但不会通过循环的每次迭代，而只能执行一次。 2.)添加“browse
java - 安卓开发: Line Spacing With Line Numbering
在我的应用程序中，我的 EditText 左侧有行号 - 到目前为止一切都很好，行号与 EditText 的行完全对齐。问题是，如果用户更改 EditText 的文本大小，则行号无法正确对齐。所以我
command-line - Vim : from command line, 转到文件末尾并开始编辑？
通过使用 + 的参数调用它，我可以使 vim 将光标定位在文件的最后一行。 : vi + myfile # "+" = go to last line of file 我怎样才能做到
克洛尤尔 : Read an edn file line by line
我已经在文件中写入了这样的数据(某种) {:a 25 :b 28} {:a 2 :b 50} ... 我想要这些 map 的惰性序列。大约有 4000 万行。我也可以写 10000 的 block
javascript - 多行文本区域值 : line feed not present in all lines
我在文本区域中发现了一个奇怪的错误(？)... 比如说，有一个使用多行文本(用户粘贴的文本或预设文本无关紧要，两者都经过测试)。我想从中获取文本并替换 \n与其他东西......结果是，.re
python - Reportlab new line in a long line
我需要一个新行，这样我就可以在 PFD 中看到一个格式，我尝试添加一个页面宽度但它没有用，我用另一个东西/n 也没有用。这是我的代码。我可以手动添加格式，因为我需要显示从数据库中获取的信息，并且我在一
Java地理工具: Snap to line identifiying line that was snapped to
我正在尝试编写一个 Java 程序，它将大量 GPS 坐标捕捉到线形文件(道路网络)，并且不仅返回新坐标，还返回捕捉到的线段的唯一标识符。该标识符是否是 FID、其他语言中使用的“索引”(即，其中 1
javascript - 填充二维数组 "line by line"JavaScript/NodeJS
你好，我正在努力处理 JavaScript/NodeJS 中的数组。基本上，这是我的代码: let arr = new Array(); arr = { "Username" : var1,
python - matplotlib 2d line line,=plot逗号意思
我正在学习 matplotlib 的基本教程，我正在处理的示例代码是: import numpy as np import matplotlib.pylab as plt x=[1,2,3,4] y=
c# - 文本文件 : Reading line by line C#
所以，假设我有一个包含 20 行的文本文件，每行都有不同的文本。我希望能够有一个包含第一行的字符串，但是当我执行 NextLine(); 时我希望它成为下一行。我试过了，但它似乎不起作用: strin

首页

博学

6Ren·AI

商城

CSS 下拉菜单教程 line25.com 不适合我