CODEWITHSUNDEEP
htmlcss
Vucko
Vucko

Reputation: 49

Div's position bothering another divs so I can't click on them

Probably one noob question, but I can't understand positioning in css very good. Yesterday I had a problem with background and drop-down menu, so I decided to start again from scratch. The problem persists.

My h1 couldn't be in position I wanted so I made its position:relative and then I could move it, but because of that I can't click on my drop-down menu or even on logo. Just half of it.

HTML: 

 <link rel="stylesheet" type="text/css" href="./style2.css"  />
 </head>
 <body>
 <div id="stajl">
 <ul>
 <li><a href="#">Home Page </a></li><li>
 <a href="#">Services <span class="arrow">&#9660;</span></a>
 <ul><li>
 <a href="#">Trades </a></li><li>
 <a href="#">Exchanges </a></li><li>
 <a href="#">Business to Business </a></li>
 </ul>
 <li><a href="#">About </a></li><li>
 <a href="#">Contact </a></li>
 </ul>
 </div>
 <div id="img">
 <a href="#"><img src="pfslogo2.png" /> </a>
 </div>
 <div id="header">
 <h1>We're here to help! </h1>
 </div>
 </body>
 </html>

CSS: 

body {
overflow-y: scroll;}
#stajl ul {
list-style-type: none;
margin:0;
padding:0;
float: right;

}
#stajl ul li:hover a{
background-color: #d7e6fa;
}

#stajl ul li {
display: inline-block;

}

#stajl ul li a {
text-decoration: none;
display: block;
padding: 15px;
color: white;
background-color: #0099cc;

}

#stajl ul ul {
display: none;
position: absolute;
margin-left: -105px;
}
#stajl ul li:hover ul {
display: block;
}

#stajl ul ul li {
display: block;
color: white;
width: 352px;

}
#stajl ul li li a:hover {
color: cyan;
}
.arrow {
font-size: 10px;
vertical-align: middle;
}

#img img {
margin: 0;
padding: 0;
height: 50px;
width: 100px;
top: 0;
left:0;
}
#header h1 {
padding: 0;
margin:0;
text-align: center;
position: relative;
top: -40px;
left: -60px;
color: #0099cc;
}

Codepen created by Dorvalla for my problem: codepen.io/anon/pen/VeXyRY

Any advice will be appreciated! Thanks

Upvotes: 1

Views: 58

Answers (3)

Mikkel Fennefoss
Mikkel Fennefoss

Reputation: 911

Put a z-index: -1; on your h1, then your navigation will work again.

Upvotes: 1

niorad
niorad

Reputation: 1370

The H1 is Blocking the Cursor, you need to set the H1 to be a bit shorter:

#header {
  text-align:center;
}
#header h1 {
   display:inline-block;
}

http://codepen.io/niorad/pen/EPEQxJ

Upvotes: 1

David P
David P

Reputation: 2093

Set the z-index of your menu higher than that of the div.

Upvotes: 1

Related Questions