Creat a CSS Background

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.
LVL 7
rgranlundAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

rgranlundAuthor Commented:
menu-pulldown.png
0
GaryCommented:
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
Peter HartCommented:
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

duncanb7Commented:
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
rgranlundAuthor Commented:
@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
GaryCommented:
As clear as mud

Like this
http://jsfiddle.net/wtSKB/2/
0
Peter HartCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ray PaseurCommented:
You might want to learn about this: https://developer.chrome.com/devtools/index
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.