CODEWITHSUNDEEP
htmlcssdrop-down-menu
Dawn Sawyer
Dawn Sawyer

Reputation: 13

Issues with Drop Down Menu size and overlap CSS/HTML

I am having trouble with my drop down menu, the second level items overlap each other and each item has a different width. I have searched this site and tried fixes to similar problems, but haven found anything that works. I am not a programer, but am trying to add this to my website. Here is my code:

#menu ul,
#menu li,
#menu span,
#menu a {
  margin: 0;
  padding: 0;
  position: relative;
}


#menu ul {
  list-style: none;
position: absolute;
top: 1.1em;
}

#menu
{
position: relative;
background: #171e35 url('images/menubg.gif') repeat-x top left;
height: 3.5em;
padding: 0em 1.0em 0em 1.0em;
margin-bottom: 10px;
}

#menu ul > ul > li
{
float: left;
}


#menu ul ul {
  display: none;
  position: absolute;
  top: 36px;
  left: -1px;
  width: 100px;
  text-align: left;  
  *width: 100%; /* IE7 hack*/
}
#menu li:hover ul {
  display: block;
}

#menu:after,
#menu ul:after {
  content: '';
  display: block;
  clear: both;
}


#menu ul li
{
position: relative;
display: inline;
}

#menu ul li a
{
padding: 0.5em 1.0em 0.9em 1.0em;
color: #fff;
text-decoration: none;
}

/*#menu ul li a:hover
{
text-decoration: none;
}*/

#menu ul li a.active
{
background: #171e35 url('images/menuactive.gif') repeat-x top 

left;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Menu</title>
<!-- zenlike1.0 by nodethirtythree design http://www.nodethirtythree.com -->
  <meta name="keywords" content="">
  <meta name="description" content="">
  <link rel="stylesheet" type="text/css"
 href="test.css">
</head>
<body>
<div id="menu"><!-- HINT: Set the class of any menu link below to "active" to make it appear active -->
<ul>
  <li><a href="#" class="active">Home</a></li>
  <li><a href="#" class="active">Department</a>
    <ul>
      <li><a href="#" class="active">Patrol </a></li>
      <li><a href="#" class="active">Investigations</a></li>
      <li><a href="#" class="active">Records </a></li>
      <li><a href="#" class="active">Prosecution
        </a></li>
    </ul>
  </li>
  <li><a href="#" class="active">Forms</a></li>
  <li><a href="#" class="active">Gallery</a></li>
  <li><a href="#" class="active">Media</a></li>
  <li><a href="#" class="active">Contact</a></li>
</ul>
</div>
<br>
</body>
</html>

Upvotes: 1

Views: 706

Answers (4)

Alexei Darmin
Alexei Darmin

Reputation: 2129

Fiddle

Created a class submenu and added display:block. This allows us to assign a width and height value DOM objects and stops your menu items from overlapping. In your case I assigned the class submenu to the malfunctioning menu items to avoid any conflicts with preexisting code.

Simplified version fiddle

Since you're not a programmer I took the liberty to polish up your code and remove the lines that weren't doing anything. The simplified link above has the same functionality as your code (with solution) but with less confusing classes. It may make it easier for you to continue working on your site!

To fix alignment on your website, replace the CSS for ul#menu ul with:

ul#menu ul {
  display: none;
  position: absolute;
  top: 28px;
  margin-left: 70px;
  width: 100px;
  text-align: left;
 }

To address the submenu appearing behind your content add z-index:10 to #menu

Upvotes: 1

Divyang
Divyang

Reputation: 88

Just add this css on your style

#menu ul ul li a {
    width:100%;
    float:left
}

Upvotes: 0

Michael Benjamin
Michael Benjamin

Reputation: 372264

Give the sub nav links more line-height.

Add this rule to your styles:

#menu ul li ul li {
    line-height: 2em;
    }

Then, to close the gap created between the main nav and the sub nav (which will prevent you from hovering over sub nav links) add a bit of padding-bottom to your existing main nav rule:

Adjust this rule in your styles:

#menu ul li a
{
    /* original */
    /* padding: 0.5em 1.0em 0.9em 1.0em; */

    /* new */
    padding: 0.5em 1.0em 1.1em 1.0em;

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

The solution above is a straight answer to your question and solves the problem you raise.

However, I would suggest you consider a better overall solution for your navigation development. Currently, it seems a bit disjointed and patched together.

Here's a great video tutorial for building clean, elegant and robust nav menus. https://youtu.be/k14bxM1cWoM?list=PLl1MmKpV0eieAACJx-rTMnmKYfcBOjqKN

Upvotes: 1

Thirumal Sakthivel
Thirumal Sakthivel

Reputation: 188

Try this style,

<style>

#menu {
position: relative;
background: #171e35 url('images/menubg.gif') repeat-x top left;
height: 3.5em;
padding: 0em 1.0em 0em 1.0em;
margin-bottom: 10px;
}

#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
line-height: normal;
}

#menu li {
float: left;
margin-right: 1px;
}

#menu a {
display: block;
padding: 0px 30px;
line-height: 45px;
text-decoration: none;
color: #FFFFFF;
}

#menu li:hover {
text-decoration: none;
background: #171e35;
}

#menu .active{
background: #171e35;
}

#menu li{
position: relative;
}

#menu ul ul{
position:absolute;
left: 0;
display: none;
width: 300px;
}

#menu li li{
float:none;
}

#menu li:hover > ul{
display:block;
}
</style>

Upvotes: 0

Related Questions