0

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

2
Contributors
12
Replies
36
Views
4 Years
Discussion Span
Last Post by gahhon
0

Click Here

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?

Attachments Untitled.jpg 181.22 KB
0

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

Edited by JorgeM

0

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?

0

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..

0

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?

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

e5fe133cbae6e30156851b6ed6be9313

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?

0

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.

Edited by JorgeM

0

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

Edited by gahhon

0

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?

0

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

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.