Solved

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

Posted on 2013-01-21
3
7,201 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

What is SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
IIS redirect 1 71
encoding an href string 2 21
Winform Module - What is the ASP.Net equiv 2 23
Make options hidden and show just option that is on 1 20
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

825 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