Question

I have a simple horizontal nav menu that uses highly-styled anchors for buttons. Now, the last button, called “store” has a list of content that becomes visible via this jquery hover effect.

I can’t get the “store” button to align with the rest of them. Two days now I’m trying float:left margin 50% whatever, position:incorrect, overflow:I-forget-what, clear:both, plus various cheesy hacks, and I’m at that point of CSS positioning where you start thinking seriously about re-constructing your layout using tables.

Instead of selling my soul to tables, I guess I better just ask someone who is more experienced to please take a look:

http://www.ideagasms.net/ideagasms-with-dropdown-menu.html

When viewing source, you’ll notice I added lots of comments next to the main elements so it should be easy to make sense of everything quickly. Thank you. 🙂

Answer 1

This code should work:

I’ve added a wrapping div to your menu with a fixed width and centred it on the page. Then added each a tag into an li.

Your jQuery Menu is now broken but it should just be a case of finding the correct elements again now the orders have changed in the dom.

You might also have to create some new styles and add them to the elements again. As I’ve probably messed a few bits up. I’d suggest adding proper classes and id’s so you don’t run into styling problems in the future.

<div id="nav">
 <ul>
  <li>
      <a alt="STORE" class="navmenu faded" href="http://www.ideagasms.net/ideagasms-products/">STORE</a>
    <ul class="file_menu">
      <li><a href="#file">File</a></li>
      <li><a href="#edit">Edit</a></li>
      <li><a href="#view">View</a></li>
      <li><a href="#insert">Insert</a></li>
      <li><a href="#modify">Modify</a></li>
      <li><a href="#control">Control</a></li>
      <li><a href="#debug">Debug</a></li>
      <li><a href="#window">Window</a></li>
      <li><a href="#help">Help</a></li>
    </ul>
  </li>
  <li><a alt="HOME" class="navmenu faded" href="http://www.ideagasms.net/link">HOME</a>     </li>
  <li><a alt="VIDEO" class="navmenu faded" href="http://www.ideagasms.net/link">VIDEO</a> </li>
  <li><a alt="ABOUT" class="navmenu faded" href="http://www.ideagasms.net/link">ABOUT</a></li>
  <li><a alt="CONTACT" class="smcf-link navmenu faded">CONTACT</a></li>
  <li><a alt="DONATIONS" class="navmenu scroll faded" href="http://www.ideagasms.net/link">DONATIONS</a></li>
  <li><a alt="MENTORING" class="navmenu faded" href="http://www.ideagasms.net/link">MENTORING</a></li>
  <li><a alt="BEAUTY" class="navmenu faded" href="http://www.ideagasms.net/link">BEAUTY</a></li>
  <li><a alt="SNIPPETS" class="navmenu scroll faded" style="letter-spacing:1px" href="http://www.ideagasms.net/link">#iG</a></li>
</ul>
</div>


<style type="text/css"> 


#buttonnav {  
float:left;
height: 25px;
width: 100px;
margin-bottom:1cm;
position:relative;
z-index:9; 
}
#nav {
  margin: auto;
  width: 740px;
  background: orange;
}
ul {
  margin: auto;
}
ul li {     
    display: inline;
    float: left;

}

.menu_class {
    border:1px solid #1c1c1c;
}

ul.file_menu {
    cursor:pointer;
    display:none;
    width:260px;
    border: 1px solid #1c1c1c;
    margin:0; 
    padding:0; 
    list-style:none;
}

.file_menu li {
    background-color: #302f2f;
}

.file_menu li a {
    color:#FFFFFF; 
    text-decoration:none; 
    padding:10px; 
    display:block;
}

.file_menu li a:hover {
    padding:10px;
    font-weight:bold;
    color: #F00880;
}

</style>