Horizontal Menus alignment with css or jquery

StackOverflow https://stackoverflow.com/questions/14099224

Question

I am working on a horizontal menu which has one child level which should also be show horizontally Below is the code for the Horizontal menu which sub menu. I have worked on it but i not facing certain issue with it. I want to align parent menu to left so that it starts almost from the staring position of the div #nav-wrapper.

Secondly it show the child menu exactly below the parent menu i want child menu to show from the extreme left of the meus.

For example in this case parent Menu wrapper div #nav-wrapper has width of 1000px and when i give 1000px with to class #mainnav li ul it show menu out the main area. how can i align child menu to start from the starting position of first element in parent menu

Thirdly, i need to highly the parent menu in different color let us say red when one hover over the parent menu or if parent menu is active.

enter image description here

I tried to make it work but so far i don't have the desired results.

<html>
<head>
<title></title>
<style>
#nav-wrapper
{
position: relative;
background-color:white;
height:30px;
width:1000px;
background-color:#f5f5f5;
}
#nav-wrapper ul {
    color: #242320;
    list-style-type: none;
    font-size: .8em;
    line-height: 30px;
    font-weight: bold;
    font-family:Tahoma;
}
#mainnav li {
    float: left;
    position: relative;
}
#mainnav li a:link, #mainnav li a:visited {
    line-height: 30px;
    font-weight: bold;
    font-size: 1.2em;
    text-decoration: none;
    color: #242320;
    padding: 5px 0px;
    margin: 0px 0px 0px 0px;
}
#mainnav li a:active {
    line-height: 30px;
    font-weight: bold;
    font-size: 1.2em;
    text-decoration: none;
    color: #242320;
    background-color:red;
    padding: 5px 0px;
    margin: 0px 0px 0px 0px;
}
#mainnav li ul {
    left: 0px;
    min-height: 30px;
}
#mainnav li a:hover {
color: #3b541e;
border-bottom: solid 0px #3b541e;
}
#mainnav li ul {
  position: absolute;
  display: none;
  left: 0px;
  top: 30px;
  padding: 0px 0px 0px 5px;
  margin: 0px;
  background-color: gray;
  min-height: 30px;
  width: 1000px;
  float: left;
}

#mainnav li a:link, #mainnav li a:visited {
  line-height: 30px;
  font-weight: bold;
  font-size: 1.2em;
  text-decoration: none;
  color: #242320;
  padding: 1px 0px;
  margin: 0px 0px 0px 35px;
}

#mainnav ul li ul li a:link, #mainnav ul li ul li a:visited {
font-size: 1.2em;
color: #b1bba5;
margin: 0px 25px;
padding: 12px 0px 12px 0px;
line-height: 30px;
font-weight: bold;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
$('#nav-wrapper').on('hover', 'li', function () {
    $(this).closest('ul').find('li').removeClass('active');
    $(this).addClass('active');
    return false;
});

$('#nav-wrapper ul li').hover(function() {
    $('ul', this).show();
}, function() {
    $('#nav-wrapper ul', this).hide();
});
    });

</script>
</head>
<body>
    <div id="nav-wrapper">
        <ul id="mainnav">
        <li><a href="#">Home</a></li>
        <li><a href="#About</a></li>
        <li><a  href="#">Services</a>
            <ul>
              <li><a  href="#">Graphic Design</a></li>
               <li><a  href="#">Web Design</a></li>
              <li><a  href="#">Multimedia</a></li>
              <li><a  href="#">Exhibitions</a></li>
               <li><a  href="#">Trade Marketing</a></li>
            </ul>
        </li>
        <li><a  href="#">Work</a></li>
        <li><a  href="#">Clients</a></li>
        <li><a  href="#">Blog</a></li>
        <li><a  href="#">Contact</a></li>
        </ul>
    </div>
</body>
Was it helpful?

Solution

This is what you have.

http://jsfiddle.net/ZvW9T/1/

Make a jsFiddle yourself next time, it will be easier to answer you.

Note that you have an error in a not-closing anchor: <li><a href="#About</a></li> should be <li><a href="#About"></a></li>.

I can't get your first question, i already see the parent menu on the left.

For your second question, just remove position: relative from #mainnav li rule:

#mainnav li {
    float: left;
    /* position: relative; */
}

(see demo: http://jsfiddle.net/ZvW9T/2/)

For third question, you are already using jQuery, you can easily achieve that with javascript then, IF it is the way you wanna go.

But mixing css and javascript to generate css creates a bit of confusion in your code, you may wanna re-think the page in pure CSS, following one of the several walkthrough around the web, just google CSS Drop Down Menu .

Please note that, usually, submenus are verticals, not horizontals (sometimes they're mixed, like two columns of vertical values), and that they almost always start from the parent menu tab, not from the beginning of the page...

OTHER TIPS

Can you try this

http://jsfiddle.net/ZXVLb/

#mainnav li a:link, #mainnav li a:visited margin:0 35px 0 0;

#mainnav li ul left position

#nav-wrapper margin:0 0 0 35px;
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top