• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 8479
  • Last Modified:

Creating drop down menus using css and asp.net master pages

I'm trying to create a drop down menu with some of the main links on my asp.net master page.  I would like to use my cascading style sheet to accomplish this.

Below is the css that I'm using in my style sheet

/* Menu */

#menu 
{
    position: absolute;
    top: 140px;
    left: 225px;
	width: 872px;
	height: 35px;
	margin: 0 auto;
	padding: 0px 0px 0px 28px;
    background-color:#859BAF;
    -moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border: 0px solid #f46d0f;
border-top: 0;
}

#menu ul {
	margin: 0;
	list-style: none;
	line-height: normal;
    height: 40px;
    width: 872px;
}

#menu li {
	display: inline;
	text-align: center;
}

#menu a 
{
	height: 27px;
	float:left;
	left: 40px;
	padding: 8px 30px 0px 25px;
	text-decoration: none;
	text-align: center;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	color: #000000;
}

#menu .active a:hover {
	background: #859BAF;
	font-style: oblique;
	font-weight: bold;
	border-right: 2px solid #fdca43;
	color: #f46d0f;
} 

#menu .active a {
	background: #859BAF;
	font-style: oblique;
	font-weight: bold;
	border-right: 2px solid #fdca43;
	color: #000;
}

#menu .active1 a:hover {
	background: #859BAF;
	font-style: oblique;
	font-weight: bold;
	color: #f46d0f;
} 

#menu .active1 a {
	background: #859BAF;
	font-style: oblique;
	font-weight: bold;
	color: #000;
}

#splash {
	width: 940px;
	height: 299px;
	margin: 0 auto;
}

Open in new window


And below is what I'm using for the styles on my menu in my Master Page

<div id="menu">
     <ul>
        <li class="active"><a href="Default.aspx">Home</a></li>
        <li class="active"><a href="aboutus.aspx">About Us</a></li>
        <li class="active"><a href="menu.aspx">Menu</a></li>
        <li class="active"><a href="contact.aspx">Contact</a></li>
        <li class="active"><a href="gallery.aspx">Gallery</a></li>
        <li class="active"><a href="location.aspx">Location</a></li>
        <li class="active1"><a href="login.aspx">Login</a></li>
    </ul>
  </div>

Open in new window


My designer for this page is no longer working with me and so I'm really new to CSS. and how to attach it to master pages in asp.net.

Can anyone help me or point me in the right direction because I would like a sub-menu for each one of those menu links on the master page that drops down when you hover over it.
0
Ru1995
Asked:
Ru1995
  • 3
1 Solution
 
Deepak LakkadCommented:
You can create <ul> under <li> tag to create sub menu.

For Example, your Login has sub menu, then you can create it as following.
<li class="active1"><a href="login.aspx">Login</a>
            	<ul>
                	<li>menu - 1</li>
                    <li>menu - 2</li>
                </ul>
            </li>

Open in new window


You need addition css for this.

- Deepak Lakkad
0
 
Deepak LakkadCommented:
Hi,

Here is a good tutorial for creating drop-down menu using CSS and HTML.

http://www.ehow.com/how_11399776_create-drop-down-html-menu-submenu.html

You need to put all your menu code on master page.

- Deepak Lakkad
0
 
Deepak LakkadCommented:
one more good tutorial for drop-down menu

http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

- Deepak Lakkad
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now