Solved

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

Posted on 2013-01-21
3
6,882 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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
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 Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

762 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

13 Experts available now in Live!

Get 1:1 Help Now