Drop Down Menu: floating to the left and not under pages tab

  • Hi Everyone,

    Here is the link to my customized theme website:
    https://70.40.220.105/~iamanedu/

    When you hover over each tab in the navigation, it is floating to the left, I would love for it to hover over it’s tab.

    Here is my code:
    html in my header.php:

    <body <?php body_class();?>>
<div id="main-nav">
    <a href="home.html"><h1>I <span class="title">AM</span> An Educator</h2></a>

    <div id="nav-items">
<?php wp_nav_menu( array( 'theme_location' => 'main-menu', 'container' => 'div','container_id' => 'main-nav', 'items-wrap' => '<ul id="nav-items"</ul>', ) ); ?>    </div>
</div>

    css:

    #nav-items {
  float: left;
	border-top: solid thin #684685;
	border-bottom: solid thin #684685;
  width: 100%;
}

#main-nav ul li{
	list-style-type: none;
  display: inline;
  padding: 5%;
	position: relative;
}

#main-nav {
  text-align: center;
  float:right;

}

#main-nav > li {
font-family:'Oswald', sans-serif;
font-weight:400;
  font-size: 1.125em;
  display: inline-block;
  list-style-type: none;
  position: relative;
  width:16%;
  float:left;
  line-height:50px;
  text-align:center;
}

#main-nav li.wide {
width:20%;
}

#main-nav > li a {
  text-decoration: none;
}

#main-nav > li a.current {
  background: #fff;
  color: #000;
}

#main-nav ul li:hover a {
  background: #fff;
  color: #000;
}

#main-nav > li a {
  display: block;
  color: #000;
}

#main-nav > li:hover a {
  background: #fff;
  color: #000;
}

#main-nav ul.sub-menu {
  text-align: left;
  position: absolute;
  display: none;
  background-color: #fff;
  z-index: 20;
  width:8em;
  text-indent:1em;
}

#menu-main ul.sub-menu li {

  display: block;
  float: none;
  font-size: 1em;
  position: relative;
}

#menu-main ul.sub-menu li a {

}

#menu-main li:hover > ul.sub-menu{

  display: block;

}

    I feel that the position is relative and absolute to the right declarations but not sure if there’s something i’m missing.

    All help would be greatly appreciated thanks!

  • The topic ‘Drop Down Menu: floating to the left and not under pages tab’ is closed to new replies.