How do you correctly write CSS code for a menubar intended for jquery coding?

Question

I want to replicate the exact look of my website seen here: iananthonyphotography.com.

It was created using spry for the menubar and jquery for the slider.

For my new site, I want to use jquery for both menubar and slider. I have no problem doing the slider but the menubar is giving me a lot of problems.

Below is a jsfiddle of the actual text I will use for the bar.

As you can see, everything lines up perfectly, and stays centered on the page when one scrolls horizontally. However my coding is wrong in many ways. I need to attribute a style or id to the ul or both ul and li items so I can hide the sub-items of the menu then assign jquery code to reveal it during a mouseover.

What you see in the jfiddle represents a botched effort to do so after I encountered a number of problems. Can anyone help me with cleaning up the css code please? For a designer or developer this is a piece of cake, for me it’s not.

Please refer to jsfiddle for full css code. I was not going to spend half an hour putting in four spaces before each line of text in order to make this post, otherwise I would have posted the code here directly.

https://jsfiddle.net/ianant/faaccqt8/

https://jsfiddle.net/ianant/faaccqt8/embedded/result/

a:link {
text-decoration: none;
}

Answer 1

I think this is what you need. If you need a lot of clean-ups, paying a developer to do the job would probably be the best solution.

$('nav ul li').on('mouseover',function(){
		$(this).children('ul').show();
	 }).on('mouseleave',function(){
        $(this).children('ul').hide();
     })

body {
	background-image: url(images/homepage_images/frontpage.jpg);
	background-position: top center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	margin: 0px;
}

body, td, th {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 13px;
}

a {
	text-decoration: none;
}

nav ul.nav-list {
    text-align: center; 
	width: 1000px;
	margin: 0 auto;
}

nav ul.nav-list li {
	display: inline-block;
    line-height: 1.5em;
}

ul.nav-list > li {
    position: relative;
	width: 200px;
}

ul.nav-list > li > a:hover {
	background-color: #F0F;
}

nav ul li ul.dropdown {
    display: none;    
}

ul.dropdown li {
    position: absolute;
    background-color:#C3C;
    left: 0;
    width: 200px;
    z-index: 1;
}

ul.dropdown li a {
    color: #ddd;
}

ul.dropdown li a:hover {
     background-color: #0C3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="wrapper">
<nav class="main-nav">
<ul class="nav-list">
  <li><a href="#">About</a>
    <ul class="dropdown">
      <li><a href="#">The Park</a></li>
    </ul>
  </li>
  <li><a href="#">Updates</a>
    <ul class="dropdown">
      <li><a href="slieshow.html">Slideshow</a></li>
    </ul>
  </li>
  <li><a href="#">Trailers</a></li>
  <li><a href="#">Support</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</nav>
</div>