2

I have a requirement where i need to work on a menu which should look something like as shown in image below Sample

I have worked in the past on simple down-down menu, but this time the requirement is a bit different. Top Menu links should change color to blue on hover & when on that particular page.

Sub menus should come in while color & the background image used for sub-menu should be transparent & submenus should show a pointer towards parent menu as show in image below.

I have looked for similar menu example so that i can replicate but i was not lucky to find one.

I would appreciate if someone can point me in right direction.

Or help in in doing it.

I have also set up an example on jsFiddle but I need to add an additional feature like i mentioned above.

http://jsfiddle.net/4wrDx/

meanwhile i will also try to work on to see if i can manage it. I am not a CSS guru i am more of a developer who manages design work also. I need this for asp.net webform based website.

Code sample

<body>

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a>
            <ul>
                <li><a href="#">Photoshop</a></li>
                <li><a href="#">Illustrator</a></li>
                <li><a href="#">Web Design</a>
                    <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Articles</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">User Experience</a></li>
            </ul>
        </li>
        <li><a href="#">Inspiration</a></li>
    </ul>
</nav>

</body>

UPDATED:

I have managed to get so far. Please check the link http://jsfiddle.net/4wrDx/10/

Rich
  • 5,603
  • 9
  • 39
  • 61
Learning
  • 19,469
  • 39
  • 180
  • 373

1 Answers1

2

Used to this Css *RGBA* 

nav ul ul {
        background: rgba(0,0,0,0.2); // used to RGBA 
border-radius: 0px; padding: 0;
        position: absolute;
 top: 100%;
    }
nav ul ul li a:hover {
                    background: rgba(0,0,0,0.4);  // used to RGBA 
                }

Demo

==========

Updated For arrow 

nav > ul > li > ul:after {
content: "";
border-left: solid 20px transparent;
border-right: solid 20px transparent;
display: inline-block;
border-bottom: solid 20px rgba(0,0,0,0.7);
position: absolute;
top: -19px;
left: 0;
}

Updated Demo

Rohit Azad Malik
  • 31,410
  • 17
  • 69
  • 97
  • 1
    Not ie8 compatible though. Try the converter here: http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/, mentioned in this answer: http://stackoverflow.com/a/3977240/828584 – mowwwalker Aug 01 '13 at 05:43
  • Thanks your other demo is fine but how can i add pointer on top as show in example image of my question. – Learning Aug 01 '13 at 05:48
  • Thanks Mr. Azad, You seem to be a Design Guru, Can i ask you an expert opinion, 1. Can my sublevel menu have different color then Top level menu. 2. Can i change the color of Top Level Menu when it is on that particular page or active link for example. – Learning Aug 01 '13 at 06:14
  • i suck at understanding others' code, therefore i had to write my own. :D But yea you can do anything in css(like change color). Except making shapes, masking, filters, and pixel by pixel manipulation. But its coming maybe in next 5 years. – Muhammad Umer Aug 01 '13 at 08:35