ASP.NET DropDown Menu

[gahhon]

CSS

ul#menu
{ margin:0;}

ul#menu li
{ padding: 0 0 0 0px;
  list-style: none;
  margin: 2px 0 0 0;
  display: inline;
  background: transparent;}

ul#menu li a
{ float: left;
  font: bold 120% Arial, Helvetica, sans-serif;
  height: 24px;
  margin: 10px 0 0 20px;
  text-shadow: 0px -1px 0px #000;
  padding: 6px 20px 0 20px;
  background: transparent; 
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border: 7px 7px 7px 7px;
  text-align: center;
  color: #FFF;
  text-decoration: none;} 

ul#menu li.current a
{ color: #1D1D1D;
  background: #FFF;
  background: -moz-linear-gradient(#fff, #ccc);
  background: -o-linear-gradient(#fff, #ccc);
  background: -webkit-linear-gradient(#fff, #ccc);
  text-shadow: none;}

ul#menu li:hover a
{ color: #1D1D1D;
  background: #FFF;
  background: -moz-linear-gradient(#fff, #ccc);
  background: -o-linear-gradient(#fff, #ccc);
  background: -webkit-linear-gradient(#fff, #ccc);
  text-shadow: none;}

Design Code

 <div id="menubar">
            <ul id="menu">
                <li class="current"><a href="Home.aspx">Home</a></li>
                <li><a href="MemberMaintenance.aspx">Member Maintenance</a></li>
                <li><a href="#">Manager Maintenance</a>
                    <div class="submenu">
                    <ul>
                        <li><a href="#">Register</a></li>
                    </ul>
                    </div>
                </li>
                <li><a href="LoanMaintenance.aspx">Loan Maintenance</a></li>
                <li><a href="Report.aspx">Report</a></li>                
            </ul>
        </div><!--close menubar-->      

Since i don't familiar with CSS because i didn't learn about it.
But what should i do in order to perform once i mouse hover to Manager Maintenance will drop down a list which contain Register?
Thanks for advanced

[JorgeM]

Take a look at this sample. I took your example and just modified a few items in the style sheet. There are several variations of how to build a navigational menu using CSS.

http://jsfiddle.net/aUpLD/

Here is a resource: Multi-Level Navigation Menu Using CSS

[gahhon]

Thanks for advanced me, but it blocked by the slideshow,
what code should i apply to not blocking by the slideshow and having the same style of box container as the menubar?

[JorgeM]

You can most likely set the z-index of your menu higher than the z-index of your box container.

[gahhon]

Okay the blocking is solve, but how can i drop down like a box which the color and font style exactly same as the menu bar?

[gahhon]

someone could help me?

[JorgeM]

Is your drop down navigation menu item solved?

how can i drop down like a box which the color and font style exactly same as the menu bar?

What do you mean drop down box? are we still talking about a navigation menu? Use CSS...

If this is something different, you should create a different thread for a different question with more detailed information, picture, etc..

[gahhon]

which mean when i mouse hover a menu item will drop down a list and don't not block by any content behind (which mean menu drop down always show in front; solved) but the drop down list doesn't show like a box, how can i arhieve that?

[gahhon]

ul#menu
{ margin:0; }

ul#menu li, ul#menu ul li
{ padding: 0 0 0 0px;
  list-style: none;
  margin: 2px 0 0 0;
  display: inline;
  background: transparent;
  text-align: center;
  float:left;
  position:relative;}

ul#menu li a, ul#menu ul li a
{ float: left;
  font: bold 120% Arial, Helvetica, sans-serif;
  height: 24px;
  margin: 10px 0 0 20px;
  text-shadow: 0px -1px 0px #000;
  padding: 6px 20px 0 20px;
  background: transparent; 
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border: 7px 7px 7px 7px;
  text-align: center;
  color: #FFF;
  text-decoration: none;} 

ul#menu li.current a
{ color: #1D1D1D;
  background: #FFF;
  background: -moz-linear-gradient(#fff, #ccc);
  background: -o-linear-gradient(#fff, #ccc);
  background: -webkit-linear-gradient(#fff, #ccc);
  text-shadow: none;}

ul#menu li:hover a, ul#menu ul li:hover a
{ color: #1D1D1D;
  background: #FFF;
  background: -moz-linear-gradient(#fff, #ccc);
  background: -o-linear-gradient(#fff, #ccc);
  background: -webkit-linear-gradient(#fff, #ccc);
  text-shadow: none;}

ul#menu li:hover ul 
{ display: block;
  overflow: hidden;
}

ul#menu ul 
{ position:absolute;
  top:100%;
  height: 300px;
  width: 300px;
  display:none;
  padding:0px;
  margin:0px;
  background: #1D1D1D;
  background: -moz-linear-gradient(#535353, #1d1d1d);
  background: -o-linear-gradient(#535353, #1d1d1d);
  background: -webkit-linear-gradient(#535353, #1d1d1d);
  border-radius: 15px 15px 15px 15px;
  -moz-border-radius: 15px 15px 15px 15px;
  -webkit-border: 15px 15px 15px 15px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
}

Okay, Finally i can display like a box when dropping down from menubar,
but the content is still blocking my menu drop down list and how to remove the white color for every a in menu drop down list?

[JorgeM]

With regard to the white color, you added a background in your styles...

background: #FFF;

You mentioned that you are not familiar with CSS in your post. I assume you just copied this from somewhere else and you are tyring to modify it to your needs. That's going to be challenging without some knowledge of CSS.

I'd recommend you take some time to learn CSS. It will only take a few days to learn the basics.

Also, if you want a basic navigation menu, i provided a link above that goes over the steps on building one with all of the code. feel free to use that resource to help you.

[gahhon]

As you meantioned background: #FFF only appeared in the mouse hover and current class only.
But i didn't mouse hover the Password Modification in fact i mouse hover the Profile
Somemore, in this condition a drop down menu list is

<ul id="menu">
    <li>Menu1</li>
    <li>MouseHoverDropDown
        <ul>
            <li>SubMenu1</li>
        </ul>
    </li>
</ul>

am i right? so according to my code above

ul#menu li ul li
{ padding: 0 0 0 0px;
  list-style: none;
  margin: 2px 0 0 0;
  display: inline;
  background: transparent;
  text-align: center;
  float:left;
  position:relative;}

this must be the relavent to the drop down menu list, but the background is set to transparent.
and the drop down menu list is blocked by content i fixed already by adding z-index = 1

[JorgeM]

Ok, so its getting challenging to help at this point with the code in pieces. I'm not able to follow along to see what's the problem.

Do you have this online or on jsfiddle so that we can tinker with it a bit more and also provide an explanation of what the problem is?

[gahhon]

i download template from google search. It containing those js and css files.