Mixing
Dropdown menu not working after placing another div
up vote
2
down vote
favorite
Before i placed the div class "hero", the dropdown menu works well but after i placed the div class "hero", the dropdown menu did not work anymore. please help me I am new to html and css. thank you.
body {
margin: 0;
}
.here {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.menu .here .choice {
float: right;
width: 200px;
height: 40px;
display: inline;
border: 3px;
background-color: orange;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
.here .heh {
text-decoration: none;
color: white;
display: block;
}
.here .heh:hover {
background-color: green;
}
.subs {
text-decoration: none;
background-color: orange;
display: none;
color: white;
}
.subs:hover {
background-color: green;
}
.choice:hover .subs {
display: block;
}
.hero {
position: absolute;
width: 100%;
margin-left: 0;
margin-top: 0;
}
.hero .head1 {
color: black;
text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 270px;
font-family: bodoni;
}
.hero .head3 {
text-align: center;
font-family: helvetica;
}<head>
<link rel="stylesheet" href="one.css">
<link rel="stylesheet" href="two.css">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="menu">
<ul class="here">
<li class="choice"><a href="" class="heh">About</a>
<ul class="here">
<li><a href="" class="subs">You</a></li>
<li><a href="http://www.facebook.com" class="subs">Me</a> </li>
<li><a href="" class="subs">Us</a></li>
</ul>
</li>
<li class="choice"><a href="" class="heh">Contact Us</a></li>
<li class="choice"><a href="" class="heh">Sign Up</a></li>
<li class="choice"><a href="" class="heh">Log in</a></li>
</ul>
</div>
<div class="hero">
<h1 class="head1">something.com</h1>
<h3 class="head3">this is a random sentence.</h3>
</div>
</body>These code works whenever I eliminate the second div which is the "hero" class. But I don't know what happened here. I need your help.
html css
edited 17 hours ago
Smollet777
654414
asked 18 hours ago
Karl Philipp Sy Fabre
7310
add a comment |
up vote
2
down vote
favorite
Before i placed the div class "hero", the dropdown menu works well but after i placed the div class "hero", the dropdown menu did not work anymore. please help me I am new to html and css. thank you.
body {
margin: 0;
}
.here {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.menu .here .choice {
float: right;
width: 200px;
height: 40px;
display: inline;
border: 3px;
background-color: orange;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
.here .heh {
text-decoration: none;
color: white;
display: block;
}
.here .heh:hover {
background-color: green;
}
.subs {
text-decoration: none;
background-color: orange;
display: none;
color: white;
}
.subs:hover {
background-color: green;
}
.choice:hover .subs {
display: block;
}
.hero {
position: absolute;
width: 100%;
margin-left: 0;
margin-top: 0;
}
.hero .head1 {
color: black;
text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 270px;
font-family: bodoni;
}
.hero .head3 {
text-align: center;
font-family: helvetica;
}<head>
<link rel="stylesheet" href="one.css">
<link rel="stylesheet" href="two.css">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="menu">
<ul class="here">
<li class="choice"><a href="" class="heh">About</a>
<ul class="here">
<li><a href="" class="subs">You</a></li>
<li><a href="http://www.facebook.com" class="subs">Me</a> </li>
<li><a href="" class="subs">Us</a></li>
</ul>
</li>
<li class="choice"><a href="" class="heh">Contact Us</a></li>
<li class="choice"><a href="" class="heh">Sign Up</a></li>
<li class="choice"><a href="" class="heh">Log in</a></li>
</ul>
</div>
<div class="hero">
<h1 class="head1">something.com</h1>
<h3 class="head3">this is a random sentence.</h3>
</div>
</body>These code works whenever I eliminate the second div which is the "hero" class. But I don't know what happened here. I need your help.
html css
edited 17 hours ago
Smollet777
654414
asked 18 hours ago
Karl Philipp Sy Fabre
7310
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
Before i placed the div class "hero", the dropdown menu works well but after i placed the div class "hero", the dropdown menu did not work anymore. please help me I am new to html and css. thank you.
body {
margin: 0;
}
.here {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.menu .here .choice {
float: right;
width: 200px;
height: 40px;
display: inline;
border: 3px;
background-color: orange;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
.here .heh {
text-decoration: none;
color: white;
display: block;
}
.here .heh:hover {
background-color: green;
}
.subs {
text-decoration: none;
background-color: orange;
display: none;
color: white;
}
.subs:hover {
background-color: green;
}
.choice:hover .subs {
display: block;
}
.hero {
position: absolute;
width: 100%;
margin-left: 0;
margin-top: 0;
}
.hero .head1 {
color: black;
text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 270px;
font-family: bodoni;
}
.hero .head3 {
text-align: center;
font-family: helvetica;
}<head>
<link rel="stylesheet" href="one.css">
<link rel="stylesheet" href="two.css">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="menu">
<ul class="here">
<li class="choice"><a href="" class="heh">About</a>
<ul class="here">
<li><a href="" class="subs">You</a></li>
<li><a href="http://www.facebook.com" class="subs">Me</a> </li>
<li><a href="" class="subs">Us</a></li>
</ul>
</li>
<li class="choice"><a href="" class="heh">Contact Us</a></li>
<li class="choice"><a href="" class="heh">Sign Up</a></li>
<li class="choice"><a href="" class="heh">Log in</a></li>
</ul>
</div>
<div class="hero">
<h1 class="head1">something.com</h1>
<h3 class="head3">this is a random sentence.</h3>
</div>
</body>These code works whenever I eliminate the second div which is the "hero" class. But I don't know what happened here. I need your help.
html css
edited 17 hours ago
Smollet777
654414
asked 18 hours ago
Karl Philipp Sy Fabre
7310
Before i placed the div class "hero", the dropdown menu works well but after i placed the div class "hero", the dropdown menu did not work anymore. please help me I am new to html and css. thank you.
body {
margin: 0;
}
.here {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.menu .here .choice {
float: right;
width: 200px;
height: 40px;
display: inline;
border: 3px;
background-color: orange;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
.here .heh {
text-decoration: none;
color: white;
display: block;
}
.here .heh:hover {
background-color: green;
}
.subs {
text-decoration: none;
background-color: orange;
display: none;
color: white;
}
.subs:hover {
background-color: green;
}
.choice:hover .subs {
display: block;
}
.hero {
position: absolute;
width: 100%;
margin-left: 0;
margin-top: 0;
}
.hero .head1 {
color: black;
text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 270px;
font-family: bodoni;
}
.hero .head3 {
text-align: center;
font-family: helvetica;
}<head>
<link rel="stylesheet" href="one.css">
<link rel="stylesheet" href="two.css">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="menu">
<ul class="here">
<li class="choice"><a href="" class="heh">About</a>
<ul class="here">
<li><a href="" class="subs">You</a></li>
<li><a href="http://www.facebook.com" class="subs">Me</a> </li>
<li><a href="" class="subs">Us</a></li>
</ul>
</li>
<li class="choice"><a href="" class="heh">Contact Us</a></li>
<li class="choice"><a href="" class="heh">Sign Up</a></li>
<li class="choice"><a href="" class="heh">Log in</a></li>
</ul>
</div>
<div class="hero">
<h1 class="head1">something.com</h1>
<h3 class="head3">this is a random sentence.</h3>
</div>
</body>These code works whenever I eliminate the second div which is the "hero" class. But I don't know what happened here. I need your help.
body {
margin: 0;
}
.here {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.menu .here .choice {
float: right;
width: 200px;
height: 40px;
display: inline;
border: 3px;
background-color: orange;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
.here .heh {
text-decoration: none;
color: white;
display: block;
}
.here .heh:hover {
background-color: green;
}
.subs {
text-decoration: none;
background-color: orange;
display: none;
color: white;
}
.subs:hover {
background-color: green;
}
.choice:hover .subs {
display: block;
}
.hero {
position: absolute;
width: 100%;
margin-left: 0;
margin-top: 0;
}
.hero .head1 {
color: black;
text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 270px;
font-family: bodoni;
}
.hero .head3 {
text-align: center;
font-family: helvetica;
}<head>
<link rel="stylesheet" href="one.css">
<link rel="stylesheet" href="two.css">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="menu">
<ul class="here">
<li class="choice"><a href="" class="heh">About</a>
<ul class="here">
<li><a href="" class="subs">You</a></li>
<li><a href="http://www.facebook.com" class="subs">Me</a> </li>
<li><a href="" class="subs">Us</a></li>
</ul>
</li>
<li class="choice"><a href="" class="heh">Contact Us</a></li>
<li class="choice"><a href="" class="heh">Sign Up</a></li>
<li class="choice"><a href="" class="heh">Log in</a></li>
</ul>
</div>
<div class="hero">
<h1 class="head1">something.com</h1>
<h3 class="head3">this is a random sentence.</h3>
</div>
</body>body {
margin: 0;
}
.here {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.menu .here .choice {
float: right;
width: 200px;
height: 40px;
display: inline;
border: 3px;
background-color: orange;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
.here .heh {
text-decoration: none;
color: white;
display: block;
}
.here .heh:hover {
background-color: green;
}
.subs {
text-decoration: none;
background-color: orange;
display: none;
color: white;
}
.subs:hover {
background-color: green;
}
.choice:hover .subs {
display: block;
}
.hero {
position: absolute;
width: 100%;
margin-left: 0;
margin-top: 0;
}
.hero .head1 {
color: black;
text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 270px;
font-family: bodoni;
}
.hero .head3 {
text-align: center;
font-family: helvetica;
}<head>
<link rel="stylesheet" href="one.css">
<link rel="stylesheet" href="two.css">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="menu">
<ul class="here">
<li class="choice"><a href="" class="heh">About</a>
<ul class="here">
<li><a href="" class="subs">You</a></li>
<li><a href="http://www.facebook.com" class="subs">Me</a> </li>
<li><a href="" class="subs">Us</a></li>
</ul>
</li>
<li class="choice"><a href="" class="heh">Contact Us</a></li>
<li class="choice"><a href="" class="heh">Sign Up</a></li>
<li class="choice"><a href="" class="heh">Log in</a></li>
</ul>
</div>
<div class="hero">
<h1 class="head1">something.com</h1>
<h3 class="head3">this is a random sentence.</h3>
</div>
</body>html css
html css
edited 17 hours ago
Smollet777
654414
asked 18 hours ago
Karl Philipp Sy Fabre
7310
edited 17 hours ago
Smollet777
654414
asked 18 hours ago
Karl Philipp Sy Fabre
7310
edited 17 hours ago
Smollet777
654414
edited 17 hours ago
Smollet777
654414
edited 17 hours ago
Smollet777
654414
654414
asked 18 hours ago
Karl Philipp Sy Fabre
7310
asked 18 hours ago
Karl Philipp Sy Fabre
7310
asked 18 hours ago
Karl Philipp Sy Fabre
7310
7310
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
up vote
1
down vote
accepted
The .hero element is on top of your menu. You can check it by using the dev tools of your browser and hovering over the element. You will see, that it expands over the menu and covers it, even though you can see it visually. You can add something like this:
.hero {
pointer-events:none;
}
That way you can access elements beneath .hero.
Another solution is to add a negative z-index to the element, which stacks it behind the menu and makes it accessible again
answered 18 hours ago
Michael
1749
add a comment |
up vote
0
down vote
You can add position:relative div above absolute div and need to change some menu css
body{
margin: 0;
}
.here,.hereinner{
list-style-type: none;
margin:0px;
padding:0px;
}
.menu .here .choice{
float: right;
display: inline;
border: 3px;
background-color: orange;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
.hereinner li{
background-color: orange;
opacity: 1;
line-height: 40px;
text-align: center;
font-size: 20px;
}
.here .heh,.subs{
width: 200px;
height: 40px;
text-decoration: none;
color: white;
display: block;
}
.here .heh:hover{
background-color: green;
}
.hereinner{
display: none;
}
.subs{
text-decoration: none;
background-color: orange;
color: white;
}
.subs:hover{
background-color: green;
}
.choice:hover .hereinner{
display: block;
}
.clearfix{
clear:both;
}
.posrel{
position:relative;
}
.hero{
position: absolute;
width: 100%;
margin-left: 0;
margin-top: 0;
}
.hero .head1{
color: black;
text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 270px;
font-family: bodoni;
}
.hero .head3{
text-align: center;
font-family: helvetica;
}<div class="menu">
<ul class="here">
<li class="choice" ><a href="" class="heh">About</a>
<ul class="hereinner">
<li ><a href="" class="subs">You</a></li>
<li ><a href="http://www.facebook.com" class="subs">Me</a> </li>
<li><a href="" class="subs">Us</a></li>
</ul>
</li>
<li class="choice"><a href="" class="heh">Contact Us</a></li>
<li class="choice"><a href="" class="heh">Sign Up</a></li>
<li class="choice"><a href="" class="heh">Log in</a></li>
</ul>
<div class="clearfix">
</div>
</div>
<div class="posrel">
<div class="hero">
<h1 class="head1">something.com</h1>
<h3 class="head3">this is a random sentence.</h3>
</div>
</div>answered 17 hours ago
Hiren Vaghasiya
2,1231417
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
The .hero element is on top of your menu. You can check it by using the dev tools of your browser and hovering over the element. You will see, that it expands over the menu and covers it, even though you can see it visually. You can add something like this:
.hero {
pointer-events:none;
}
That way you can access elements beneath .hero.
Another solution is to add a negative z-index to the element, which stacks it behind the menu and makes it accessible again
answered 18 hours ago
Michael
1749
add a comment |
up vote
1
down vote
accepted
The .hero element is on top of your menu. You can check it by using the dev tools of your browser and hovering over the element. You will see, that it expands over the menu and covers it, even though you can see it visually. You can add something like this:
.hero {
pointer-events:none;
}
That way you can access elements beneath .hero.
Another solution is to add a negative z-index to the element, which stacks it behind the menu and makes it accessible again
answered 18 hours ago
Michael
1749
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
The .hero element is on top of your menu. You can check it by using the dev tools of your browser and hovering over the element. You will see, that it expands over the menu and covers it, even though you can see it visually. You can add something like this:
.hero {
pointer-events:none;
}
That way you can access elements beneath .hero.
Another solution is to add a negative z-index to the element, which stacks it behind the menu and makes it accessible again
answered 18 hours ago
Michael
1749
The .hero element is on top of your menu. You can check it by using the dev tools of your browser and hovering over the element. You will see, that it expands over the menu and covers it, even though you can see it visually. You can add something like this:
.hero {
pointer-events:none;
}
That way you can access elements beneath .hero.
Another solution is to add a negative z-index to the element, which stacks it behind the menu and makes it accessible again
answered 18 hours ago
Michael
1749
answered 18 hours ago
Michael
1749
answered 18 hours ago
Michael
1749
answered 18 hours ago
Michael
1749
1749
add a comment |
add a comment |
up vote
0
down vote
You can add position:relative div above absolute div and need to change some menu css
body{
margin: 0;
}
.here,.hereinner{
list-style-type: none;
margin:0px;
padding:0px;
}
.menu .here .choice{
float: right;
display: inline;
border: 3px;
background-color: orange;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
.hereinner li{
background-color: orange;
opacity: 1;
line-height: 40px;
text-align: center;
font-size: 20px;
}
.here .heh,.subs{
width: 200px;
height: 40px;
text-decoration: none;
color: white;
display: block;
}
.here .heh:hover{
background-color: green;
}
.hereinner{
display: none;
}
.subs{
text-decoration: none;
background-color: orange;
color: white;
}
.subs:hover{
background-color: green;
}
.choice:hover .hereinner{
display: block;
}
.clearfix{
clear:both;
}
.posrel{
position:relative;
}
.hero{
position: absolute;
width: 100%;
margin-left: 0;
margin-top: 0;
}
.hero .head1{
color: black;
text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 270px;
font-family: bodoni;
}
.hero .head3{
text-align: center;
font-family: helvetica;
}<div class="menu">
<ul class="here">
<li class="choice" ><a href="" class="heh">About</a>
<ul class="hereinner">
<li ><a href="" class="subs">You</a></li>
<li ><a href="http://www.facebook.com" class="subs">Me</a> </li>
<li><a href="" class="subs">Us</a></li>
</ul>
</li>
<li class="choice"><a href="" class="heh">Contact Us</a></li>
<li class="choice"><a href="" class="heh">Sign Up</a></li>
<li class="choice"><a href="" class="heh">Log in</a></li>
</ul>
<div class="clearfix">
</div>
</div>
<div class="posrel">
<div class="hero">
<h1 class="head1">something.com</h1>
<h3 class="head3">this is a random sentence.</h3>
</div>
</div>answered 17 hours ago
Hiren Vaghasiya
2,1231417
add a comment |
up vote
0
down vote
You can add position:relative div above absolute div and need to change some menu css
body{
margin: 0;
}
.here,.hereinner{
list-style-type: none;
margin:0px;
padding:0px;
}
.menu .here .choice{
float: right;
display: inline;
border: 3px;
background-color: orange;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
.hereinner li{
background-color: orange;
opacity: 1;
line-height: 40px;
text-align: center;
font-size: 20px;
}
.here .heh,.subs{
width: 200px;
height: 40px;
text-decoration: none;
color: white;
display: block;
}
.here .heh:hover{
background-color: green;
}
.hereinner{
display: none;
}
.subs{
text-decoration: none;
background-color: orange;
color: white;
}
.subs:hover{
background-color: green;
}
.choice:hover .hereinner{
display: block;
}
.clearfix{
clear:both;
}
.posrel{
position:relative;
}
.hero{
position: absolute;
width: 100%;
margin-left: 0;
margin-top: 0;
}
.hero .head1{
color: black;
text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 270px;
font-family: bodoni;
}
.hero .head3{
text-align: center;
font-family: helvetica;
}<div class="menu">
<ul class="here">
<li class="choice" ><a href="" class="heh">About</a>
<ul class="hereinner">
<li ><a href="" class="subs">You</a></li>
<li ><a href="http://www.facebook.com" class="subs">Me</a> </li>
<li><a href="" class="subs">Us</a></li>
</ul>
</li>
<li class="choice"><a href="" class="heh">Contact Us</a></li>
<li class="choice"><a href="" class="heh">Sign Up</a></li>
<li class="choice"><a href="" class="heh">Log in</a></li>
</ul>
<div class="clearfix">
</div>
</div>
<div class="posrel">
<div class="hero">
<h1 class="head1">something.com</h1>
<h3 class="head3">this is a random sentence.</h3>
</div>
</div>answered 17 hours ago
Hiren Vaghasiya
2,1231417
add a comment |
up vote
0
down vote
up vote
0
down vote
You can add position:relative div above absolute div and need to change some menu css
body{
margin: 0;
}
.here,.hereinner{
list-style-type: none;
margin:0px;
padding:0px;
}
.menu .here .choice{
float: right;
display: inline;
border: 3px;
background-color: orange;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
.hereinner li{
background-color: orange;
opacity: 1;
line-height: 40px;
text-align: center;
font-size: 20px;
}
.here .heh,.subs{
width: 200px;
height: 40px;
text-decoration: none;
color: white;
display: block;
}
.here .heh:hover{
background-color: green;
}
.hereinner{
display: none;
}
.subs{
text-decoration: none;
background-color: orange;
color: white;
}
.subs:hover{
background-color: green;
}
.choice:hover .hereinner{
display: block;
}
.clearfix{
clear:both;
}
.posrel{
position:relative;
}
.hero{
position: absolute;
width: 100%;
margin-left: 0;
margin-top: 0;
}
.hero .head1{
color: black;
text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 270px;
font-family: bodoni;
}
.hero .head3{
text-align: center;
font-family: helvetica;
}<div class="menu">
<ul class="here">
<li class="choice" ><a href="" class="heh">About</a>
<ul class="hereinner">
<li ><a href="" class="subs">You</a></li>
<li ><a href="http://www.facebook.com" class="subs">Me</a> </li>
<li><a href="" class="subs">Us</a></li>
</ul>
</li>
<li class="choice"><a href="" class="heh">Contact Us</a></li>
<li class="choice"><a href="" class="heh">Sign Up</a></li>
<li class="choice"><a href="" class="heh">Log in</a></li>
</ul>
<div class="clearfix">
</div>
</div>
<div class="posrel">
<div class="hero">
<h1 class="head1">something.com</h1>
<h3 class="head3">this is a random sentence.</h3>
</div>
</div>answered 17 hours ago
Hiren Vaghasiya
2,1231417
You can add position:relative div above absolute div and need to change some menu css
body{
margin: 0;
}
.here,.hereinner{
list-style-type: none;
margin:0px;
padding:0px;
}
.menu .here .choice{
float: right;
display: inline;
border: 3px;
background-color: orange;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
.hereinner li{
background-color: orange;
opacity: 1;
line-height: 40px;
text-align: center;
font-size: 20px;
}
.here .heh,.subs{
width: 200px;
height: 40px;
text-decoration: none;
color: white;
display: block;
}
.here .heh:hover{
background-color: green;
}
.hereinner{
display: none;
}
.subs{
text-decoration: none;
background-color: orange;
color: white;
}
.subs:hover{
background-color: green;
}
.choice:hover .hereinner{
display: block;
}
.clearfix{
clear:both;
}
.posrel{
position:relative;
}
.hero{
position: absolute;
width: 100%;
margin-left: 0;
margin-top: 0;
}
.hero .head1{
color: black;
text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 270px;
font-family: bodoni;
}
.hero .head3{
text-align: center;
font-family: helvetica;
}<div class="menu">
<ul class="here">
<li class="choice" ><a href="" class="heh">About</a>
<ul class="hereinner">
<li ><a href="" class="subs">You</a></li>
<li ><a href="http://www.facebook.com" class="subs">Me</a> </li>
<li><a href="" class="subs">Us</a></li>
</ul>
</li>
<li class="choice"><a href="" class="heh">Contact Us</a></li>
<li class="choice"><a href="" class="heh">Sign Up</a></li>
<li class="choice"><a href="" class="heh">Log in</a></li>
</ul>
<div class="clearfix">
</div>
</div>
<div class="posrel">
<div class="hero">
<h1 class="head1">something.com</h1>
<h3 class="head3">this is a random sentence.</h3>
</div>
</div>body{
margin: 0;
}
.here,.hereinner{
list-style-type: none;
margin:0px;
padding:0px;
}
.menu .here .choice{
float: right;
display: inline;
border: 3px;
background-color: orange;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
.hereinner li{
background-color: orange;
opacity: 1;
line-height: 40px;
text-align: center;
font-size: 20px;
}
.here .heh,.subs{
width: 200px;
height: 40px;
text-decoration: none;
color: white;
display: block;
}
.here .heh:hover{
background-color: green;
}
.hereinner{
display: none;
}
.subs{
text-decoration: none;
background-color: orange;
color: white;
}
.subs:hover{
background-color: green;
}
.choice:hover .hereinner{
display: block;
}
.clearfix{
clear:both;
}
.posrel{
position:relative;
}
.hero{
position: absolute;
width: 100%;
margin-left: 0;
margin-top: 0;
}
.hero .head1{
color: black;
text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 270px;
font-family: bodoni;
}
.hero .head3{
text-align: center;
font-family: helvetica;
}<div class="menu">
<ul class="here">
<li class="choice" ><a href="" class="heh">About</a>
<ul class="hereinner">
<li ><a href="" class="subs">You</a></li>
<li ><a href="http://www.facebook.com" class="subs">Me</a> </li>
<li><a href="" class="subs">Us</a></li>
</ul>
</li>
<li class="choice"><a href="" class="heh">Contact Us</a></li>
<li class="choice"><a href="" class="heh">Sign Up</a></li>
<li class="choice"><a href="" class="heh">Log in</a></li>
</ul>
<div class="clearfix">
</div>
</div>
<div class="posrel">
<div class="hero">
<h1 class="head1">something.com</h1>
<h3 class="head3">this is a random sentence.</h3>
</div>
</div>body{
margin: 0;
}
.here,.hereinner{
list-style-type: none;
margin:0px;
padding:0px;
}
.menu .here .choice{
float: right;
display: inline;
border: 3px;
background-color: orange;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
.hereinner li{
background-color: orange;
opacity: 1;
line-height: 40px;
text-align: center;
font-size: 20px;
}
.here .heh,.subs{
width: 200px;
height: 40px;
text-decoration: none;
color: white;
display: block;
}
.here .heh:hover{
background-color: green;
}
.hereinner{
display: none;
}
.subs{
text-decoration: none;
background-color: orange;
color: white;
}
.subs:hover{
background-color: green;
}
.choice:hover .hereinner{
display: block;
}
.clearfix{
clear:both;
}
.posrel{
position:relative;
}
.hero{
position: absolute;
width: 100%;
margin-left: 0;
margin-top: 0;
}
.hero .head1{
color: black;
text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 270px;
font-family: bodoni;
}
.hero .head3{
text-align: center;
font-family: helvetica;
}<div class="menu">
<ul class="here">
<li class="choice" ><a href="" class="heh">About</a>
<ul class="hereinner">
<li ><a href="" class="subs">You</a></li>
<li ><a href="http://www.facebook.com" class="subs">Me</a> </li>
<li><a href="" class="subs">Us</a></li>
</ul>
</li>
<li class="choice"><a href="" class="heh">Contact Us</a></li>
<li class="choice"><a href="" class="heh">Sign Up</a></li>
<li class="choice"><a href="" class="heh">Log in</a></li>
</ul>
<div class="clearfix">
</div>
</div>
<div class="posrel">
<div class="hero">
<h1 class="head1">something.com</h1>
<h3 class="head3">this is a random sentence.</h3>
</div>
</div>answered 17 hours ago
Hiren Vaghasiya
2,1231417
answered 17 hours ago
Hiren Vaghasiya
2,1231417
answered 17 hours ago
Hiren Vaghasiya
2,1231417
answered 17 hours ago
Hiren Vaghasiya
2,1231417
2,1231417
add a comment |
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53370933%2fdropdown-menu-not-working-after-placing-another-div%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
