Navigation Bar

[davy_yg]

Hello,

I have this navigation bar. I wonder why people have to "click" the portfolio tab in order for the dropdown navigation appears. Is there any way for others people enough just to "hover" the porfolio nav bar then the dropdown box automatically appears?

nav.php

<link rel="stylesheet" type="text/css" href="css/nav.css">


<div id="navigation"></div> 

<div id="navcontainerbar"> 
<!-- <nav> HTML 5 -->
<ul>

<div style="margin: -85px 0 0 -210px; position: absolute;"><li><a href="index.php">HOME</a></li></div>

<div style="margin: -85px 0 0 -180px; position: absolute;"><li class="service"><a href="about.php">ABOUT</a></li></div>

<li>

    <ul id="nav">
        <li><a class="fly" href="portfolio.php">PORTFOLIO</a>
            <ul class="dd">
                <li><a href="portfolio.php">Portfolio1</a></li>
                <li><a href="portfolio3.php">Portfolio2</a></li>             
            </ul>
        </li>     
    </ul>

</li>    

<div style="margin: -85px 0 0 270px; position: absolute;"><li><a href="blog.php">BLOG</a></li>

<div style="margin: 65px 0 0 -100px; position: absolute;">
<ul id="nav">
        <li><a class="fly" href="blog.php">BLOG</a>
            <ul class="dd">
                <li><a href="blog.php">blog1</a></li>
                <li><a href="blog2.php">blog2</a></li>             
            </ul>
        </li>     
</ul>

</div>

<li>

<div style="margin: 65px 0 0 50px; position: absolute;">
<ul id="nav">
        <li><a class="fly" href="contact.php">CONTACT US</a>
            <ul class="dd">
                <li><a href="contact.php">Contact Us1</a></li>
                <li><a href="contact2.php">Contact Us2</a></li>             
            </ul>
        </li>
</div>       
</ul>

</li></div>


</ul>
</div>
<!-- </nav> -->

<br><br>

nav.css

/* navigation */

#navigation {margin: 0 0 0 10px; width: 1000px; height: 50px; background-color:#655700; border-radius: 0; position: fixed; z-index:99;}

#navcontainerbar { margin: 100px 0 0 250px; position: fixed; z-index:99;}
#navcontainerbar ul { margin: 0 0 0 0; list-style-type: none; margin: 0; padding: 0; text-align: center; }

#navcontainerbar ul li { display: inline; font-family:arial;}
.service{ margin: 0 0 0 120px; position: relative; display: inline; font-family:arial;}
#navcontainerbar ul li a { text-decoration: none; /*padding: .2em 1em;
*/ padding: 10px 10px 10px 10px; color:white;  background-color: #655700; }
#navcontainerbar ul li a:hover { color:white; background-color:#fef900; }

/* navigation pop up */

/* main menu styles */
/*
#nav,#nav ul {
    background-image:url(./images/tr75.png);
    list-style:none;
    margin:0;
    padding:0;
}
*/
#nav {
    margin-left:-150px;
    height:40px;
    padding-left:5px;
    padding-top:5px;
    position:absolute;
    top: -65px;
    left: -310px;
    z-index:2;
}
#nav ul {
    left:-9999px;
    position:absolute;
    top:-60px;
    width:auto;
}

#nav ul ul {
    left:-9999px;
    position:absolute;
    top:0;
    width:auto;
}

#nav li {
    margin: 150px 0 0 250px;
    float:left;
    margin-right:5px;
    position:relative;
}
#nav li a {
    margin: -180px 0 0 140px;
    background:#655700;
    /*background:#c1c1bf;*/
    color:#000;
    display:block;
    float:left;
    font-size:16px;
    padding:0px;
    text-decoration:none;
    width: 120px;
    /*height: 18px;*/
}
#nav > li > a {
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    -o-border-radius:0px;
    border-radius:0;
    overflow:hidden;
}
#nav li a.fly {
    /*background-color: #c8fa7f;*/
    background-color: #655700;
    z-index: 2;
}
#nav ul li {
     margin: 30px 0 0 0;
     top: 75px;
}
#nav ul li a {
     background-color: #e1d2a2;
     color:#000;
     padding: 10px 10px 15px;
     width:150px;
}
#nav ul li a.fly {
    padding-right:10px;
}

/*hover styles*/
#nav li:hover > a {
    background-color: #fef900;
    color:#000;
}

/*focus styles*/
    #nav li a:focus {
    outline-width:0;
}

/*popups*/
#nav li a:active + ul.dd,#nav li a:focus + ul.dd,#nav li ul.dd:hover {
    left:0; z-index: 2;
}
#nav ul.dd li a:active + ul,#nav ul.dd li a:focus + ul,#nav ul.dd li ul:hover {
    left:140px;
}

/* navigation pop up end */

Thanks in advance.

[tobyITguy]

Try this:

#nav li ul
{
    display:none;
}

#nav li:hover ul
{
    display:block;
}

#nav li ul:hover li
{
    display:block;
}

[davy_yg]

I don't think it's working. It's still remains the same.

[tobyITguy]

That's because your html code is really wrong.

Try this:

<html>
<head>
    <style type="text/css">
        #nav > ul > li {
            float: left;
            padding:10px;
            list-style: none;

        }
        #nav li ul li{
          padding-top:10px;
          list-style: none;
        }         
       #nav li ul
        {
            display:none;
        }
        #nav li:hover ul
        {
            display:block;
        }
        #nav li ul:hover li
        {
            display:block;

        }   
    </style>
</head>
<body>
<!-- <nav> HTML 5 -->
<nav id="nav">
<ul>
    <li><a href="#"> Home</a> </li>

    <li> <a href="#"> About</a> </li>

        <li><a href="portfolio.php">PORTFOLIO</a>
            <ul>
                <li><a href="portfolio.php">Portfolio1</a></li>
                <li><a href="portfolio3.php">Portfolio2</a></li>             
            </ul>
        </li>     

    </li>    

        <li><a href="blog.php">BLOG</a>
            <ul >
                <li><a href="blog.php">blog1</a></li>
                <li><a href="blog2.php">blog2</a></li>             
            </ul>
        </li>  

  <li><a class="fly" href="contact.php">CONTACT US</a>
            <ul>
                <li><a href="contact.php">Contact Us1</a></li>
                <li><a href="contact2.php">Contact Us2</a></li>             
            </ul>
        </li>
    </ul>
</div>

</nav>
<!-- </nav> -->
</body>

If you wanna add more links where the "Home" is, you add <a> tags under the <li> tags in the first <ul> under the <nav> tag.

If you want sub menus, add <ul> tags under the list tag of the parent item
then <li> tags.

Try and understand what i wrote while looking at the code i gave you.

[MidiMagic]

Please do NOT use hover devices.

They are extremely annoying when the user is trying to do something else and the hover opens something that covers what the user wanted.

They are NOT accessible. People with lexical or sensory-visual disorders think they have done something wrong when the hover device activates. Also, some people with lexical difficulties use the mouse to follow what they are reading. A hover disrupts this. Hovers should be illegal.

If you must use these abominable devices, don't fill an entire horizontal line with hover devices. The mouse on a device that is not a cellphone cannot cross the line of hovers without activating one. There is one state government page I can't access without a cellphone because the hover to get the menu I want is above another line of hovers. When I cross the second line of hovers, it changes the menu below away from the menu I want. I can never get to the link to the page I want.