CODEWITHSUNDEEP
htmlcss
M9A
M9A

Reputation: 3276

CSS- Drop down menu overlapping

Hi I have created a drop down menu, however when I hover over an option, the items in the submenu just overlap eachother. I have tried to play around with the padding, postioning etc but nothing seems to work. I would appreciate it if anyone can help. Thanks

enter image description here

HTML:

        <div class="menu-bg">
      <div class="menu_nav">
        <ul>
          <li class="active"><a href="#"><span>Home</span></a></li>
          <li><a href="" onclick="return false;">Books</a>
          <ul>
          <li><a href="#">Horror</a></li>
          <li><a href="#">Thriller</a></li>
          <li><a href="#">Non Fiction</a></li>
          <li><a href="#">Crime</a></li>
          <li><a href="#">Other</a></li>
          </ul>
          </li>
          <li><a href="#"><span>About us</span></a></li>
          <li><a href="#"><span>Blog</span></a></li>
          <li><a href="#"><span>Contact</span></a></li>
        </ul>
      </div>
</div>

CSS:

.menu-bg{
background:url(../images/menu.png) center top repeat-x;
padding:10px 0;
width:100%;
height:50px;
}

.menu_nav {
margin-top:-10px;
padding-right:30px;
margin-left: auto;
margin-right: auto;
width:960px;
z-index:20;
}

.menu_nav ul {
position: relative;
  display: table;
  table-layout: fixed;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-left: 1px solid #494949;

}
.menu_nav ul li {
     border-right: 1px solid #494949;
  padding: 0;
  display: table-cell;
  float: left;
  height: 22px;
}
.menu_nav ul li a {
text-decoration:none;
 text-align: center;
  text-transform: uppercase;
  font-size: 18px;
  line-height: 22px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #7c7c7c;
  height: 22px;
  display: block;
  padding: 3px 60px 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.menu_nav ul li.active a, .menu_nav ul li a:hover {

    text-decoration:none;
    color:#EEE;
}

#active {
        text-decoration:none;
    color:#EEE;
}


    .menu_nav li ul {
    z-index:999;
        position: absolute;
        left: -999em;
        width: 160px;
        padding: 0;
    }
    .menu_nav li:hover ul {
        left: auto;
    }

    .menu_nav li li a {

        background: #060505;
        width: 120px;
        color: #FFFFFF;
        display: block;
    font-size:14px;
    text-align:left;
        margin: 0;
        padding: 9px 0 10px 25px;
        text-decoration: none;

    }
    .menu_nav li li a:hover {
        background: #99436E;
        color: #FFFFFF; 
        margin: 0;
        padding: 9px 0 10px 25px;
        text-decoration: none;
       border-bottom: 1px dotted #eee;
    }
    .menu_nav li ul ul {
        margin: -35px 0 0 145px;
    }
    .menu_nav li:hover ul ul {
        left: -999em;
    }
    .menu_nav li ul li:hover ul {
        left: auto;
    }

Upvotes: 1

Views: 1894

Answers (2)

Jack
Jack

Reputation: 1941

The height on the li's were the too small i adjusted to 42px; change it to whatever you feel's best.

.menu_nav ul li {
    border-right: 1px solid #494949;
    padding: 0;
    display: table-cell;
    float: left;
    height: 42px;
}

http://jsfiddle.net/pR5HT/

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

99% of the time, this fixes it: Style the links, not the lists.

Use display:block on the A-tag and put all styling on the A-tag, not the LI.

Use position:, float: or display: on the LI. Everything else goes on the A-tag element.

Upvotes: 0

Related Questions