I am trying to create a navigation system like this:



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


<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'>
     <li class='active'><a href='index.php'>Home</a></li>
     <li class='has-sub '><a href='index.php'>Product & Services</a>
           <li class='has-sub '><a href='connection.php'>Connection &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp      ></a>
                 <li><a href='fo.php'>Fiber Optic</a></li>
                 <li><a href='wireless.php'>Wireless</a></li>
           <li class='has-sub '><a href='collaboration.php'>Collaboration &nbsp&nbsp&nbsp&nbsp        ></a>
                 <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> 
           <li class='has-sub '><a href='solution.php'>Solution &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp      ></a>
                 <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> 
     <li><a href='#'>Agent</a></li>
     <li><a href='aboutus.php'>About Us</a></li>
     <li><a href='contactus.php'>Contact Us</a></li>

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



#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;}

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

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, the jsfiddle doesn't look right to me :s

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 :)

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


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.


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?

You could do a more direct class?

<li class='has-sub onelayer'>

So that only that one is transparent

.onelayer {

background: none !important;

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


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


.onelayer{background-color: none;}

The first level of navigation does not change yet.