下拉菜单合并在导航栏中

时间：2018-07-11 20:08:06

标签： javascript html css

我正在前端。我做了一个下拉菜单。在其他页面中效果很好。但是只有一页重叠了nav-bar。

Drop down - working fine in home

Drop down - not working fine in Projects 

body{
	margin:0;
}
.navbar {
    overflow: hidden;
    background-color: #1e436b;
    font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
    float: right;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.navbar h4 .logo{
    float: right;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.dropdown {
    float: right;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: #ffd400;
    color:black;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #ddd;
    color:#000;
}

.dropdown:hover .dropdown-content {
    display: block;
    margin-top:4%;
}

#imgId {
	-webkit-box-shadow: 0 0 18px 18px #1e436b inset;
	-moz-box-shadow: 0 0 18px 18px #1e436b inset;
 	box-shadow: 0 0 18px 18px #1e436b inset;
}
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>header</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./CSS/header.css">
</head>
<body>
    <div class="navbar">
	    <a href="login.obj"> Login </a>
	    <a href="team.obj">Team</a>  
        <a href="project.obj">Projects</a>
        <div class="dropdown">
            <a href="process.obj" class="dropbtn">Process
                <i class="fa fa-caret-down"></i>
            </a>
            <div href="project.obj" class="dropdown-content">
                <a>New Joiner Process</a>
                <a>Management Process</a>
            </div>
        </div> 
        <a href="home.obj">Home</a>
        <div id="imgId">
            <img src="./images/logo1.png" class="logo" style="padding:0px;" width="80px" height="50px">
        </div>
    </div>
</body>
</html>

任何对此问题有任何想法的人。此问题的后台处理是什么？

我为此工作了一个星期。但是我不明白。初学者在这里。

1 个答案:

答案 0 :(得分：0)

body{
	margin:0;
}
.navbar {
    overflow: hidden;
    background-color: #1e436b;
    font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
    float: right;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.navbar h4 .logo{
    float: right;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.dropdown {
    float: right;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: #ffd400;
    color:black;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    
    top: 25px;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #ddd;
    color:#000;
}

.dropdown:hover .dropdown-content {
    display: block;
    margin-top:4%;
}

#imgId {
	-webkit-box-shadow: 0 0 18px 18px #1e436b inset;
	-moz-box-shadow: 0 0 18px 18px #1e436b inset;
 	box-shadow: 0 0 18px 18px #1e436b inset;
}
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>header</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./CSS/header.css">
</head>
<body>
    <div class="navbar">
	    <a href="login.obj"> Login </a>
	    <a href="team.obj">Team</a>  
        <a href="project.obj">Projects</a>
        <div class="dropdown">
            <a href="process.obj" class="dropbtn">Process
                <i class="fa fa-caret-down"></i>
            </a>
            <div href="project.obj" class="dropdown-content">
                <a>New Joiner Process</a>
                <a>Management Process</a>
            </div>
        </div> 
        <a href="home.obj">Home</a>
        <div id="imgId">
            <img src="./images/logo1.png" class="logo" style="padding:0px;" width="80px" height="50px">
        </div>
    </div>
</body>
</html>

非常简单。将top: 25px;添加到CSS中。

相关问题
最新问题