2
找到我愚蠢的语法错误做了子菜单后，我编辑了我的文件。 我无法解决2个问题：CSS Naviagtion栏：不应该离开行和相关文本
这两个都发生在我调整浏览器窗口的大小时，以检查是否可以在每个框架大小上观看我的端（在PC上观看我的html端，稍后在移动端上）。 ..）
我不明白，为什么navi-elements开始叠加。我仔细观察编程文档的可扩展性......我忘了什么？ 另外我怎样才能让5个元素使用整个90％身体的全部100％？
如果我尝试设置我的
ul.navi字体大小绝对（px），文本将消失，当我缩放窗口太小。
如果我将它设置为相对（vw），则它变得不可读。我尝试了一种组合：font-size: calc(2px + 1vw)。这更好但不完全是我想要的。
是否有规模与拔地而起的按钮边框li词的可能性？
截图的问题，几乎全屏：
较小：
这里是我的代码：
/* CSS Style für Kletterwelt - Allgemeine Inhalte v1.02 vom 17.06.2017 */
/* Allgemeine Daten & Einstellungen */
*
{
\t margin: \t \t 0px;
\t padding: \t 0px;
}
body
{
\t /* Für den Gesamten Inhalt gilt */
\t width: \t \t \t 90vw; \t /* relativ auf Fenstergröße! */ \t
\t margin: \t \t \t auto;
\t
\t /* Für den Text des gesamten Inhaltes gilt */
\t font-family: \t arial;
}
img
{
\t width: \t 100%; \t /* Gilt für ALLE Bilder auch später im Content*/
}
/* Navigationsleiste */
ul.navi
{
\t list-style-type:none;
\t width: \t 100%;
\t font-size: \t calc(2px + 1vw); \t /* relativ zur Fenstergröße!!! */
}
ul#hauptmenu li
{
\t width: \t \t \t 19%; \t \t \t \t /* Aufteilung der Hauptmenüpunkte. relative zur body-Größe! */
\t position: \t \t relative; \t \t \t /* Untermenüs werden relativ zu ihrem Hauptmenüpunkt zugeordnet */
\t float: \t \t \t left; \t \t \t \t /* Buttons werden nebeneinander angezeigt */
\t margin-right: \t 1px; \t \t \t \t /* Abstand zwischen den Hauptmenü-Buttons*/
\t
\t border: \t \t \t 2px solid #333333; \t /* Listenelemente haben sichtbaren Rand */
\t border-radius: \t 5px; \t \t \t \t /* Rand abrunden */
}
ul#hauptmenu a
{
\t display: \t \t \t block; \t \t /* gesamtes Listenelement wird zum anklickbaren Button, nicht nur das Wort */
\t height: \t \t \t \t 40px;
\t line-height: \t \t 40px; \t \t /* Wenn Wert mit "height" identisch ist, ist Text vertikal zentriert */
\t background-color: \t #333333; \t
\t
\t text-decoration: \t none; \t \t /* Entfernt Unterstriche der Links */
\t text-align: \t \t center;
\t color: \t \t \t \t white;
\t font-weight: \t \t bold;
}
ul#untermenu li
{
\t width: \t 100%; \t /* Untermenüpunkte sind relativ! Also sollen sie die voll zur verfügung stehende Länge nutzen */
}
ul#untermenu a
{
\t width: \t 100%; \t /* Untermenüpunkte sind relativ! Also sollen sie die voll zur verfügung stehende Länge nutzen */
}
ul#hauptmenu li:hover > a
{
\t background-color: #777777; \t /* markiert Buttons übergeordneter Menüs UND den Button, über den man hovert, grau */
}
ul#hauptmenu li:hover a:hover
{
\t background-color: #FF0000; \t /* markiert Button, über den man hovert, rot (überschreibt Definition)*/
}
ul#hauptmenu ul#untermenu
{
\t display: \t none; \t \t /* Untermenüpunkte standardmäßig ausblenden*/
\t position: \t absolute;
\t width: \t \t 100%;
}
ul#hauptmenu li:hover #untermenu
{
\t display: \t block; \t /* beim Hovern über übergeordneten Menü, soll das untergeordnete eingeblendet werden */
\t z-index: \t 500; \t /* Untermenüpunkte werden über dem Content angezeigt (Ebenen-technisch) */
}<!-- Kletterwelt - Home v1.06 vom 16.06.2017 -->
<!DOCTYPE HTML>
<html lang="de">
<head>
\t <meta http-equiv="content-type" content="text/html; charset=utf-8">
\t <meta name="Florian Zimmermann, Rudolf Geist & Thomas Kretzer" content="HTML-Projekt: Kletterwelt">
\t
\t <link rel="stylesheet" type="text/css" href="./css/CWAllgemeinStyle.css">
\t <link rel="stylesheet" type="text/css" href="./css/CWContentStyle.css">
\t <link rel="icon" href="./bilder/icon.ico"> \t
\t <title>Kletterwelt - Home</title>
</head>
<body>
\t <header> \t \t
\t \t <img src="./bilder/headerbild.jpg">
\t \t
\t \t <!--Hinweis zu Navis! Untermenüs stehen innerhalb der Klammern eines Listenelements li !!! -->
\t \t <ul class="navi" id="hauptmenu">
\t \t \t <li><a href="#">HOME</a>
\t \t \t \t <ul class="navi" id="untermenu">
\t \t \t \t \t <li><a href="#">NEWS</a></li>
\t \t \t \t </ul>
\t \t \t </li>
\t \t \t <li><a href="#">VIDEOS</a></li>
\t \t \t <li><a href="#">SCHWIERIGKEITSGRADE</a></li>
\t \t \t <li><a href="#">SICHERUNGSGERÄTE</a>
\t \t \t \t <ul class="navi" id="untermenu">
\t \t \t \t \t <li><a href="#geräteart1">DINGER</a></li>
\t \t \t \t \t <li><a href="#geräteart2">TEILE \t </a></li>
\t \t \t \t </ul>
\t \t \t </li> \t
\t \t \t <li><a href="#">ALLGEMEINES</a></li>
\t \t </ul>
\t </header>
\t <main>
\t \t \t <img class="mySlides" src="egal" style="width:100%">
<!-- doesent matter now --> \t \t
\t </main>
</body>
</html>注：我index.html将在项目文件夹中。在这个文件夹将是一个“CSS”文件夹，我的CWAllgemeinStyle.css谎言。