Question

我正在开发一个网页，我对HTML很新。我有一个问题，我的导航栏下降到一个新的行，一切都随之跳跃。像这样： enter image description here

enter image description here

我认为这是悬停高度的问题。我有一个项目描述另一个框与导航栏。所以应该独立。

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

<强> JSFIDDLE

你走了。我做了几处改动：我在您的.menu 3 ul添加了一个ID。

  ul class="context">
                <li>
                    <p >Planning</p>
                </li>
                <li>
                    <p >Brainstorm</p>
                </li>
            </ul>

我删除了过渡动画。它造成了太多问题。我删除了一些不必要/有问题的CSS规则。我用position:absolute制作了菜单并添加了一些格式。

以下是完整的 CSS

}
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;
}
#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;
    border-radius: 10px;
}
.menu4 {
    height:50px;
    width:200px;
    background:rgba(0, 50, 0, 1);
    float:left;
    position:relative;
    left:-45px;
    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%;
    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;
    background: rgba(0, 100, 0, 1);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.menu3 ul li {
    padding: 5px;
}
.menu3:hover ul {
    visibility:visible;
}
.menu3 ul li:hover {
    color:rgba(255, 255, 255, 1);
}
.menu3:hover ~ .menu4 {
    display: none;
    width: 0px;
}
.context {
    position: absosute;
}
#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;
}

Answer 2

尝试使用z-index或position: absolute;将导航标题放在实际页面上方：）

文字正在改变HTML

2 个答案: