html - 文本正在移动 HTML

Question

我正在开发一个网页，我对 HTML 还很陌生。 我有一个问题，我的导航栏下降到一个新行，一切都随之跳跃。 像这样:

我认为这是悬停高度的问题。对于元素描述，我有另一个框作为导航栏。所以应该独立移动。

Css 代码如下:

 /* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

#header     {
            height:100px;
            width:1260px;
            margin-left:auto;
            margin-right:auto;
            }

#navpanel   {
            height:50px;
            width:1260px;
            background:rgba(0,50,0,1);
            border-radius: 10px;
            margin-left:auto;
            margin-right:auto;
            margin-top:50px;
            box-shadow:10px 10px 10px #888888;

            }

#content    {
            height:900px;
            width:1260px;
            border-radius:10px;
            margin-left:auto;
            margin-right:auto;
            margin-top:30px;
            margin-bottom:100px;
            box-shadow:10px 10px 10px #888888;                              
            background:rgba(255,255,255,1);
            }

#tekst      {
            height:700px;
            width:1060px;
            margin-left:auto;
            margin-right:auto;
            position:relative;
            top:75px;
            text-align:justify;
            }

.menu1      {
            height:50px;
            width:30%;
            background:rgba(0,200,0,1);
            float:left;
            transition:all .2s ease-in-out 0s;
            border-radius: 10px;
            }

.menu2      {
            height:50px;
            width:200px;
            background:rgba(0,150,0,1);
            float:left;
            position:relative;
            left:-15px;
            transition:all .2s ease-in-out 0s;
            border-radius: 10px;
            }

.menu3      {
            height:50px;
            width:200px;
            background:rgba(0,100,0,1);
            float:left;
            position:relative;
            left:-30px;
            transition:all .2s ease-in-out 0s;
            border-radius: 10px;
            }

.menu4      {
            height:50px;
            width:200px;
            background:rgba(0,50,0,1);
            float:left;
            position:relative;
            left:-45px;
            transition:all .2s ease-in-out 0s;
            border-radius: 10px;
            }

h1
            {
            font-family:Calibri;
            font-size:50px;
            }

.phead      {
            font-family:"Cooper Black";
            font-size:100px;
            color:rgba(0,0,0,1);
            position:relative;
            width:auto;
            }

.p1         {
            font-family:"Cooper Black";
            font-size:25px;
            color:rgba(255,255,255,.75);
            position:relative;
            margin-left:25px;
            margin-top:10px;
            width:100px;
            }

.p2         {
            font-family:"Cooper Black";
            font-size:25px;
            color:rgba(255,255,255,1);
            position:relative;
            margin-left:25px;
            margin-top:10px;
            width:100px;
            }

p           {
            font-family:Calibri;
            font-size:20px;
            }


.menu2:hover    {
            width:20%;
            }

.menu3:hover    {
            width:50%;
            height:auto;
            border-bottom-right-radius: 10px;
            box-shadow:10px 10px 10px #888888;                              
            }


.menu2:hover .p1    {
            color:rgba(255,255,255,1);
            }

.menu3:hover .p1    {
            color:rgba(255,255,255,1);
            }

.menu4:hover .p1    {
            color:rgba(255,255,255,1);
            }

.menu3 ul   {
            visibility:hidden;
            list-style:none;
            font-family:"Cooper Black";
            font-size:16px;
            color:rgba(255,255,255,.75);
            height:200;

            margin-left:-5px;
            }

.menu3:hover ul {
            visibility:visible;
            }



.menu3 ul li:hover  {
            color:rgba(255,255,255,1);  
            }

希望有人有解决方案。

HTML:

<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>TU Eindhoven iGEM</title>
<link rel="stylesheet" href="TU_Eindhoven_Style.css" type="text/css" />

<style type="text/css">
.class1 A:link {text-decoration: none; color:rgba(255,255,255,.75)}
.class1 A:visited {text-decoration: none; color:rgba(255,255,255,.75)}
.class1 A:active {text-decoration: none; color:rgba(255,255,255,1)}
.class1 A:hover {text-decoration:none; color:rgba(255,255,255,1)}

.class2 A:link {text-decoration: underline overline}
.class2 A:visited {text-decoration: underline overline}
.class2 A:active {text-decoration: underline overline}

</style>

</head>

<body style="background-image:url(Images/Background.jpg)">

<div id="header">
    <p class="phead">Microencapsulation</p>
</div>

<span class="class1">

    <div id="navpanel">

        <div class="menu1">
            <p class="p2">Home</p>
        </div>

        <div class="menu2">
            <p class="p1">Team</p>
        </div>

        <div class="menu3">
            <p class="p1">Project</p>
            <ul>
                <li>
                    <p >Planning</p>
                </li>
                <li>
                    <p >Brainstorm</p>
                </li>
            </ul>
        </div>

        <div class="menu4">
            <p class="p1">Notebook</p>
        </div>

    </div>

</span>

<div id="content">
    <h1 align="left">Project Description</h1>
</div>

</body>
</html>

Answer 1

尝试使用 z-index 或 position: absolute; 将您的导航标题放在实际页面之上:)