子菜单是隐藏的

时间：2018-04-24 17:29:39

标签： html css

我尝试在多个地方应用z-index，但似乎没有帮助。除了HTML和CSS之外，我还附上了一个小提琴。有谁能告诉我哪里出错了。我有另一个我正在研究的网站，我应用了z-index，它工作得很好，但我似乎无法在这里应用相同的原则...... 小提琴：https://jsfiddle.net/mxplosionm203/b2pup79c/ 

@import url(//fonts.googleapis.com/css?family=Volkhov:700,700italic,400italic,400);
@import url(http://fonts.googleapis.com/css?family=Oswald);
@font-face {
font-family : "'Oswald'";
font-style : normal;
font-weight : 400;
src : local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/Y_TKV6o8WovbUd3m_X9aAA.ttf) format('truetype');
}
.err
{
	font-family : Verdana, Helvetica, sans-serif;
	font-size : 12px;
	color: red;
}

body {
	font-family: Arial,Helvetica,sans-serif;
	background-color: #F6F6F6;
	margin: 0 auto;
	}
/*TITLE BAR SPECIFICATIONS*/
.titlebar{	 
    background-color: #e6e6e6;
    display: inline-block;
    width: 100%;    
}
.titlebar > .info{
	max-width: 1175px;
   margin: 10px auto;
   text-align: right;
   color: #4F4F4F;
   line-height: 22px;
}
#content{
	max-width: 1175px;
	margin: 10px auto;
	overflow: hidden;
	white-space: nowrap;
	border-style: solid;
}
#headlogo{
	float: left;
	display: inline-block;
	border-style: solid;
}

/*NAVIGATION BAR*/
#navbar {
    position: sticky;
	top: 50%;
	transform: translateY(-50%);
	border: 5px solid #eeeeee;
	display: flex;
	background-color: white;
	max-width: 1175px;
	border-style: solid;
}

/* BE SURE TO INCLUDE THE CSS RESET FOUND IN THE DEMO PAGE'S CSS */
/* Resets */
nav a { 
    text-decoration: none;
    font: 12px/1 Verdana;
    color: #000;
    display: block; }
nav a:hover { text-decoration: underline; }
nav ul { 
    list-style: none;
    margin: 0;
    padding: 0; }
nav ul li { margin: 0; padding: 0; }

/* Top-level menu */
nav > ul > li { 
    float: left;
    position: relative; }
nav > ul > li > a { 
    padding: 10px 30px;
    border-left: 1px solid #000;
    display: block;}
nav > ul > li:first-child { margin: 0; }
nav > ul > li:first-child a { border: 0; }

/* Dropdown Menu */
nav ul li ul { 
    position: absolute;
    background: #ccc;
    width: 100%; 
    margin: 0;
    padding: 0;
    display: none; }
nav ul li ul li { 
    text-align: center;
    width: 100%; }
nav ul li ul a { padding: 10px 0; }
nav ul li:hover ul { display: block; }
<!DOCTYPE html>
<html>
<head>
	<title>TestSite&reg;</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" href="images/octab.png" type="image/x-icon" />
	<link rel="stylesheet" type="text/css" href="test.css">
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

</head>

<!--BEGIN HEADER-->
<div class="titlebar">
<div class="info">Controls Technical Support: xxx-xxx-xxxx</div>
</div>


<!--NAVIGATION BAR LOGO-->
<div id="content">
<div id="headlogo">
<img src="images/AAON_WattMasterLogo.png" alt="WattMaster Controls, Inc.">
</div>

<div id="navbar">
<nav>
    <ul>
        <li><a href="#">Link</a></li>
        <li>
            <a href="#">Link</a>
            <ul>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
            </ul>
        </li>
        <li><a href="#">Link</a></li>
    </ul>
</nav>
</div>
</div>


<!--END HEADER-->

2 个答案:

答案 0 :(得分：1)

您的问题是overflow: hidden上设置的#content。由于您的内容div只与菜单一样高，因此子菜单必须溢出，但目前已隐藏。

因此，您可以删除overflow: hidden或使内容更高，以便子菜单div不需要超出底边。

答案 1 :(得分：0)

从index_max = [5, 5, 5, 5, 6, 7, 14, 15, 16, 16, 16, 16, 18, 18, 32, 32, 34, 34, 34, 34, 35, 38, 42, 42, 42, 42, 45] pattern_width = 4 final_list = [] for i in range(len(index_max)-3): count = 1 for j in range(pattern_width): if index_max[i] == index_max[i+j]: count += 1 if count == 4: final_list.append(index_max[i]) print(final_list) 移除overflow: hidden并设置#content

的位置

更新了小提琴here 

dropdown
@import url(//fonts.googleapis.com/css?family=Volkhov:700,700italic,400italic,400);
@import url(http://fonts.googleapis.com/css?family=Oswald);
@font-face {
font-family : "'Oswald'";
font-style : normal;
font-weight : 400;
src : local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/Y_TKV6o8WovbUd3m_X9aAA.ttf) format('truetype');
}
.err
{
	font-family : Verdana, Helvetica, sans-serif;
	font-size : 12px;
	color: red;
}

body {
	font-family: Arial,Helvetica,sans-serif;
	background-color: #F6F6F6;
	margin: 0 auto;
	}
/*TITLE BAR SPECIFICATIONS*/
.titlebar{	 
    background-color: #e6e6e6;
    display: inline-block;
    width: 100%;    
}
.titlebar > .info{
	max-width: 1175px;
   margin: 10px auto;
   text-align: right;
   color: #4F4F4F;
   line-height: 22px;
}
#content{
	max-width: 1175px;
	margin: 10px auto;
	/* overflow: hidden; */
	white-space: nowrap;
	border-style: solid;
}
#headlogo{
	float: left;
	display: inline-block;
	border-style: solid;
}

/*NAVIGATION BAR*/
#navbar {
    position: sticky;
	top: 50%;
	transform: translateY(-50%);
	border: 5px solid #eeeeee;
	display: flex;
	background-color: white;
	max-width: 1175px;
	border-style: solid;
}

/* BE SURE TO INCLUDE THE CSS RESET FOUND IN THE DEMO PAGE'S CSS */
/* Resets */
nav a { 
    text-decoration: none;
    font: 12px/1 Verdana;
    color: #000;
    display: block; }
nav a:hover { text-decoration: underline; }
nav ul { 
    list-style: none;
    margin: 0;
    padding: 0; }
nav ul li { margin: 0; padding: 0; }

/* Top-level menu */
nav > ul > li { 
    float: left;
    position: relative; }
nav > ul > li > a { 
    padding: 10px 30px;
    border-left: 1px solid #000;
    display: block;}
nav > ul > li:first-child { margin: 0; }
nav > ul > li:first-child a { border: 0; }

/* Dropdown Menu */
nav ul li ul { 
    position: absolute;
    background: #ccc;
    width: 100%; 
    margin: 0;
    padding: 0;
    display: none;
    left: 0;
    top: 100%;}
nav ul li ul li { 
    text-align: center;
    width: 100%; }
nav ul li ul a { padding: 10px 0; }
nav ul li:hover ul { display: block; }

相关问题
最新问题