Solved

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

Posted on 2013-01-21
3
7,549 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
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…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

739 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