CODEWITHSUNDEEP
htmlcss
CSTroll
CSTroll

Reputation: 13

CSS drop down menu sub-items overlapping

Good day, this is my first ever question on Stack Overflow, so I hope I get it as right as possible.

I have done extensive research on my problem, mostly reading all the questions I could find on Stack Overflow and some other sites, but I could not find one answer that worked.

Some background: I am trying to write a website for recruiting for my work and it's the first ever website I have ever written. I am using a wamp server to run the site on localhost for testing. My issue is described as best as I could in the title. Find below my html code:

<html>
<head>
<title> BCB Call Plus SRL Home </title>
<link rel="stylesheet" href="Main Style.css">
</head>
<body>
<div id = "main_content">
<ul id = "nav_container">
<li> <img id = "logo" src= Logo.png style ="width:150px;height:75px"> </li>
<li> <a href= "Main.html"> Home </a> </li>
<li> <a href= "Page1.html"> Menu 1 </a> </li>
<li> <a href= "Page2.html"> Menu 2 </a> </li>
<li> <a href= "Page3.html"> Menu 3 </a> </li>
<li id ="angajari"> <a class="dropdown_toggle" data-toggle="dropdown" href= "Page4.html"> Angajari </a>
    <ul class="sub_menu">
        <li><a href="Page41.html">Ce Vrem</a></li>
        <li><a href="Page42.html">Aplica</a></li>                        
    </ul>
    </li>
</ul>
</div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

And below my CSS code:

body {
text-align:center;
}
a {
    font-size: 150%;
    text-decoration: none;
    color:#000000;
    font-weight: bold;
    vertical-align:middle;
}
a:hover{
    background-color:#338533;
}
ul {
    padding:0;
    margin:0;
}
ul#nav_container{
    background-color:#F2FFF2;
    list-style-type:none;
    text-align:center;
}
ul#nav_container li{
    display:inline-block;
    padding-left:5px;
    padding-right:5px;
    vertical-align:middle;
    position:relative;
}
.sub_menu li a{
    display:none;
}
#angajari ul.sub_menu li {
    float:left;
}
#angajari ul.sub_menu li a {
    position:absolute;
    top:0;
    white-space: nowrap;
    height:auto;
}
#angajari:hover ul.sub_menu li a {
    display:block;
}

Here's a picture of what happens when I hover over the problematic menu item: Display Issue

Final notes: I am running this only under Chrome for now. I have noticed that it doesn't read my css right in IE 8 (yes, I use IE 8, because one of my bosses wants us to.) Cross-platform compatibility fixes are welcome, but not in the scope of my current question. My WAMPSERVER has apache 2.4.9 and PHP 5.5.12.

I even tried my code on some online web code testing site whose name I forgot and got the same results. If you find that my code actually displays properly, then it may be an issue with my configuration.

Here is a jsfiddle.

Upvotes: 1

Views: 3265

Answers (3)

Melvin Pascual
Melvin Pascual

Reputation: 17

So i tried to fix your Problem i end up with this result

enter image description here

I've adjusted the margin of the logo as shown below:

<li> <img id = "logo" src= Logo.png style ="width:150px;height:75px;margin-left: -50px;"> </li>

because I adjust the width of the text container and replace the last 4 lines in your CSS CODE as shown below:

body {
text-align:center;
}
a {
    font-size: 150%;
    text-decoration: none;
    color:#000000;
    font-weight: bold;
    vertical-align:middle;
}
a:hover{
    background-color:#338533;
}
ul {
    padding:0;
    margin:0;
}
ul#nav_container{
    background-color:#F2FFF2;
    list-style-type:none;
    text-align:center;
}
ul#nav_container li{
    display:inline-block;
    padding-left:5px;
    padding-right:5px;
    vertical-align:middle;
    position:relative;
    width: 95px;
}

#main_content ul ul {
    position: absolute;
    visibility: hidden;
}

#main_content ul li:hover ul {
    visibility: visible;
}

so i made minor changes but i dont know if that's what you want to happenenter code here

Upvotes: 0

Al.G.
Al.G.

Reputation: 4387

You need your .sub_menu to be absolute, not your li as. That's it!

.sub_menu {
    position:absolute;          
}

Working demo here: http://jsfiddle.net/pxzhqqnb/1/

And I'd make the .sub_menu hidden instead of its children. Personal preference, but I think it makes more sence.

Why does it happen? Consider this simple example: (think of .relative as position: relative and .absolute as position: absolute)

<div class="relative">
    Text
    <div class="absolute">Link 1</div>
    <div class="absolute">Link 2</div>
</div>

Link 1 is absolute. It searches for the closest relative element. That's .relative. Now Link 1 gets right under the relative div. Link 2 follows the same rules, thus both links overlap.

Now let's change the code a little:

<div class="relative">
    Text
    <div class="absolute-wrapper">
        <div>Link 1</div><!-- these are now static by default -->
        <div>Link 2</div>
    </div>
</div>

absolute-wrapper is absolute, so it searches for the closest .relative element and gets right under it. Now both links are normal elements wrapped in a div, so they render as expected.

Demo of both examples here: http://jsfiddle.net/w0h7cdhe/2/

Upvotes: 2

Wavemaster
Wavemaster

Reputation: 1814

I've done a few tweaks to your css code:

body {
  text-align: center;
}
a {
  font-size: 150%;
  text-decoration: none;
  color: #000000;
  font-weight: bold;
  vertical-align: middle;
  padding: 0px 10px; /* this is just for the hover effect to lose the spaces in the html */
}
a:hover {
  background-color: #338533;
}
ul {
  padding: 0;
  margin: 0;
}
ul#nav_container {
  background-color: #F2FFF2;
  list-style-type: none;
  text-align: center;
}
ul#nav_container li {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
}
#angajari ul.sub_menu { /* do this with the menu, not just the link */
  display: none;
  position: absolute; /* set correct position */
}
#angajari ul.sub_menu li {
  display: inline-block;
}
#angajari ul.sub_menu li a { /* we don't want top: 0 because it should not overlap */
  white-space: nowrap;
}
#angajari:hover ul.sub_menu { /* see above -> menu not link */
  display: block;
}
<div id="main_content">
  <ul id="nav_container">
    <li>
      <img id="logo" src="http://lorempixel.com/150/75" style="width:150px;height:75px">
    </li>
    <li> <a href="Main.html">Home</a>  <!-- I've removed the spaced and added the gap in css -->
    </li>
    <li> <a href="Page1.html">Menu 1</a> 
    </li>
    <li> <a href="Page2.html">Menu 2</a> 
    </li>
    <li> <a href="Page3.html">Menu 3</a> 
    </li>
    <li id="angajari"> <a class="dropdown_toggle" data-toggle="dropdown" href="Page4.html">Angajari</a>
      <ul class="sub_menu">
        <li><a href="Page41.html">Ce Vrem</a>
        </li>
        <li><a href="Page42.html">Aplica</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

Upvotes: 0

Related Questions