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;}
4 Years
Discussion Span
Last Post by davy_yg

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,


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


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?

Edited by davy_yg


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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.