?
Solved

Creat a CSS Background

Posted on 2014-07-21
8
Medium Priority
?
348 Views
Last Modified: 2014-07-22
I am wondering if there is a way to create a Menu dropdown with css.  Meaning it shows up as the background when you hover over a menu choice and then there is a dropdown list.  The catch is, I want the top to be different from the bottom.  I have attached an image to explain what I would like to accomplish with CSS.
0
Comment
Question by:rgranlund
  • 2
  • 2
  • 2
  • +2
8 Comments
 
LVL 7

Author Comment

by:rgranlund
ID: 40210296
menu-pulldown.png
0
 
LVL 58

Expert Comment

by:Gary
ID: 40210303
As long as the LI contains a block element anchor tag it's easy enough since you can then target the top level anchor and the sub level anchor seperately

http://jsfiddle.net/wtSKB/

#menu > li a {
    background:blue
}
#menu > li ul li a {
    background:red
}

Open in new window

If this is what you mean
0
 
LVL 29

Expert Comment

by:chilternPC
ID: 40210304
this site lets you play with the code and se the result then download the code.

http://codepen.io/johndelatorre/pen/uGIno

change the background colour and style in the css and then download it once it looks how you want it
0
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.

 
LVL 13

Expert Comment

by:duncanb7
ID: 40210309
There is site for CSS menu bar tutorial and more than 100 example choices
with tutorial html and css code, probably, you take example no 31 at this site

http://www.noupe.com/css/100-great-css-menu-tutorials.html

Or you can directly go to  tutorial Example 31 site
http://webexpedition18.com/articles/how-to-create-a-simple-drop-down-menu-with-css3/

Duncan
0
 
LVL 7

Author Comment

by:rgranlund
ID: 40210329
@All
What I think everyone is missing is that I want to create the main navigation background (coverage) also with CSS when it is hovered.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40210334
As clear as mud

Like this
http://jsfiddle.net/wtSKB/2/
0
 
LVL 29

Accepted Solution

by:
chilternPC earned 2000 total points
ID: 40210363
the link I send you enables You to develop your own menu system then download it.  but you have to know how to add rounded corners and change the colours.
if you don't know this try this link its all ready to download:
http://code.tutsplus.com/tutorials/how-to-build-a-kick-butt-css3-mega-drop-down-menu--net-15129
0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 40212129
You might want to learn about this: https://developer.chrome.com/devtools/index
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month17 days, 3 hours left to enroll

864 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