Solved

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

Posted on 2013-01-21
3
7,014 Views
Last Modified: 2013-03-01
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
Comment
Question by:Ru1995
  • 3
3 Comments
 
LVL 11

Expert Comment

by:Deepak Lakkad
ID: 38804373
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
 
LVL 11

Expert Comment

by:Deepak Lakkad
ID: 38804385
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
 
LVL 11

Accepted Solution

by:
Deepak Lakkad earned 500 total points
ID: 38804386
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

948 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now