Website Navigation

[davy_yg]

Hello,

I am trying to create a navigation system like this:

Plan

Actual

How to create navigation like the design plan ? Now, what I have is like the actual (the website still in the localhost)

navigation.php

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

<div id="navigation">

<div id="logo"><img src="images/logo2.png" width="160" height="60"></div>

<div id='cssmenu'>
  <ul>
     <li class='active'><a href='index.php'>Home</a></li>
     <li class='has-sub '><a href='index.php'>Product & Services</a>
        <ul>
           <li class='has-sub '><a href='connection.php'>Connection &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp      ></a>
              <ul>
                 <li><a href='fo.php'>Fiber Optic</a></li>
                 <li><a href='wireless.php'>Wireless</a></li>
              </ul>
           </li>
           <li class='has-sub '><a href='collaboration.php'>Collaboration &nbsp&nbsp&nbsp&nbsp        ></a>
              <ul>
                 <li><a href='cloud.php'>Cloud</a></li>
                 <li><a href='email.php'>Email</a></li>
                 <li><a href='vcon.php'>VCON</a></li>
                 <li><a href='sharepoint.php'>Sharepoint</a></li>
                 <li><a href='crm.php'>CRM</a></li>
                 <li><a href='voip.php'>Voice</a></li> 
              </ul>
           </li>
           <li class='has-sub '><a href='solution.php'>Solution &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp      ></a>
              <ul>
                 <li><a href='network.php'>Network Solution</a></li>
                 <li><a href='system.php'>System Solution</a></li>
                 <li><a href='surveillance.php'>Surveillance</a></li> 
              </ul>
           </li>
        </ul>
     </li>
     <li><a href='#'>Agent</a></li>
     <li><a href='aboutus.php'>About Us</a></li>
     <li><a href='contactus.php'>Contact Us</a></li>
  </ul>
</div>


<div id="search">
<input type="text" name="search"></div>
<div id="sbutton"><img src="images/search button.jpg"></div>
</div>

</div>

nav.css

#cssmenu {padding: 0; margin: -50px 0 0 170px; border: 0;}
#cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding: 0;}
#cssmenu ul {position: relative; z-index: 597; }
#cssmenu ul li { float: left; min-height: 1px; vertical-align: middle;}
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;
}
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%;}
#cssmenu ul ul li {float: none; font-weight: normal;}
#cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; }
#cssmenu ul li:hover > ul { visibility: visible;}
#cssmenu ul ul {margin-top: 0; bottom: 0; left: 0;}
#cssmenu a { display: block; line-height: 2em; text-decoration: none; background-color: #c4f8f3; color: black; padding: .5em 1em; font-family: arial; font-size:16px;}
#cssmenu a:hover{ display: block; line-height: 2em; text-decoration: none; background-color: white; color: black; padding: .5em 1em; font-family: arial;font-size:16px;}

[bradly.spicer]

I don't understand what you're asking, your design is pretty close to the actual outcome.

[mattster]

Right, the problem youre having is fairly easy to fix:

Firstly: give #navigation the gradient background (the blue and white one).
Then change the #cssmenu a to a transparent background.
Next add some borders to the #cssmenu a to get your black line seperator effect.
And finally if you sort out the padding on the dropdown links, we're pretty much there.

Code here: JSfiddle
Result here: JSfiddle result

Hope this helps,
Matt

[bradly.spicer]

Matt, the jsfiddle doesn't look right to me :s

[mattster]

That's only because its short of the images etc, #davy_yg must now incorporate the JSfiddle to help him out.

The fiddle is only to help out with the structure :)

[JorgeM]

Here is a sample of a simply multi-level navigation menu. It is very similar to the one displayed in your picture. you can easily modify the CSS to have it match your site.

Multi-level Navigation Menu using CSS

[davy_yg]

The first level of the navigation must be transparent, where as the second level (sub nav) of the navigation filled with blue color. Now, the problem is if I make the first level transparent, the second level also follows.

JSfiddle

for example:

Try to turn off the background-color: #c4f8f3

#cssmenu a { display: block; line-height: 2em; text-decoration: none; background-color: #c4f8f3; color: black; padding: .5em 1em; font-family: arial; font-size:16px;}

The the whole navigation color disappeared. Is it possible just turn off the color of the first level of the navigation dan leave the sub menu blue?

[bradly.spicer]

You could do a more direct class?

<li class='has-sub onelayer'>

So that only that one is transparent
so

.onelayer {

background: none !important;
}

[davy_yg]

I've tried changing changing the html file and adding the style with the following codes:

index.html

<li class='onelayer'><a href='index.php'>Product & Services</a>

style.css

.onelayer{background-color: none;}

The first level of navigation does not change yet.