Question regarding dropdown menus

Dev Shed Forums Sponsor:

March 11th, 2013, 01:15 PM

Jezza95

Registered User

Join Date: Mar 2013

Posts: 14

Time spent in forums: 3 h 53 m 59 sec
Reputation Power: 0

Question regarding dropdown menus

Hi all,

I have recently created a dropdown menu using pure HTML/CSS.

I can't seem to work this out, but I'm sure one of you advanced coders can

I have created an arrow in Photoshop, that I want to add to the top level menu items. (I know how to do this part...)

However, I'm wanting it where when someone hovers over the menu, the dropdown appears and then the image of the arrow swops to a black version of the arrow) Almost like a hover effect.

But the only difference is, is that I want the arrow to remain black as people move their cursor down the child items within the dropdown.

This is the code so far...

Code:


#top-l-nav {
    
width: 813px;
height: 100px;
position: absolute;
margin: 0 0 0 88px;
    
}

.top-nav-holder {
    

}

#top-l-nav ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    margin: 12px 0 0 90px;

}
#top-l-nav ul li {
    display: block;
    position: relative;
    float: left;
    margin: 0 0 0 -90px;
    width: 180px;
}
#top-l-nav li ul {
    display: none;
}

#top-l-nav ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    padding: 15px 15px 15px 15px;
    background: transparent;
    white-space: nowrap;
    border-top: 1px solid #eee;
   
}


#top-l-nav ul li:hover {

background: #fff;
border-top-right-radius: 12px;
border-top-left-radius: 12px;
color: #000000;

}

#top-l-nav li:hover ul {
    display: block;
    position: absolute;
    margin: 0 0 0 90px;
    z-index: 90000;
}
#top-l-nav li:hover li {
    float: none;
    font-size: 12px;
    background: #ffffff;
   
}

#top-l-nav li:hover a { color: #000;  }
#top-l-nav li:hover li a:hover {
    background: #f5f5f5;
    color: #a31717;
    border-radius: none;
}

Thanks all

March 11th, 2013, 01:25 PM

Nanomech

Contributing User

Join Date: Aug 2011

Location: The Pleiades

Posts: 196

Time spent in forums: 1 Day 23 h 53 m 4 sec
Reputation Power: 7

Good evening,

Would you be able to post your HTML with that so I can stick it in my editor and start playing around with it.

Kind regards,

NM.

__________________
"WERE NOT WORTHY!"

"WERE NOT WORTHY!"

March 11th, 2013, 01:39 PM

Jezza95

Registered User

Join Date: Mar 2013

Posts: 14

Time spent in forums: 3 h 53 m 59 sec
Reputation Power: 0

Thank you for the immediate response.

Just to be clear, I originally wanted to use the short unicode arrows with the dropdown menu in appose to using background images for the arrows.

However, over the last half hour I've been looking at this method (Using CSS to create the exact type of arrow) that I'm wanting to use with my dropdown menu: http://davidwalsh.name/css-triangles

There was a unicode version of the "smaller shortened arrow" that I had working with my dropdown menus earlier, but the only downside was that it wasn't supported in IE8.

So, thats why I've resorted to creating my own identical arrows in Photoshop.

Code:


                <div id="top-l-nav">
                
                
 <ul id="menu-top">
    
    <li style="width: 150px; border: none;"><a href="#" class="myaccount" style="border: none;">My Account <span class="arrow-down"></span></a>

<ul>

<li style="background: #fff; border-radius: none;"><a href="#"><span style="font-size: 18px; font-weight: lighter; color: #a31717;">&rsaquo;&nbsp;</span> Account Login</a></li>

<li style="background: #fff; border-radius: none;"><a href="#"><span style="font-size: 18px; font-weight: lighter; color: #a31717;">&rsaquo;&nbsp;</span> View my usage</a></li>

<li style="background: #fff; border-radius: none;"><a href="#"><span style="font-size: 18px; font-weight: lighter; color: #a31717;">&rsaquo;&nbsp;</span> Manage my services</a></li>

<li style="background: #fff; border-radius: none;"><a href="#"><span style="font-size: 18px; font-weight: lighter; color: #a31717;">&rsaquo;&nbsp;</span> My Billing</a></li>

<li style="background: #fff; border-radius: none;"><a href="#"><span style="font-size: 18px; font-weight: lighter; color: #a31717;">&rsaquo;&nbsp;</span> Manage my credits</a></li>

<li style="background: #fff; border-radius: none;"><a href="#"><span style="font-size: 18px; font-weight: lighter; color: #a31717;">&rsaquo;&nbsp;</span> Webmail Access</a></li>
            
        </ul>
    </li>

</li>

</ul>

</div>

I've just try using this code to try and get the effect that I was after and it worked but once again IE8 wasn't picking up the unicode character that I was trying to use.

Code:


#top-l-nav .arrow-down:before {

content: "\25BE";
color: inherit;
display: inline-block;
float: left;
width: 20px;
height: 10px;

}

Does anyone know a way of forcing the unicode "\25BE" to display in IE8? I've tried the bigger arrows and I'm not really taking to them that well.

The arrow I'm trying to achieve is a squished, smaller arrow pointing downwards.

Thanks for your help

Last edited by Jezza95 : March 11th, 2013 at 02:45 PM. Reason: Just fiddling around :)

March 11th, 2013, 06:04 PM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,835

Time spent in forums: 6 Months 1 Day 22 h 11 m
Reputation Power: 4192

Quote:

Originally Posted by Jezza95

Welcome to DevShed Forums, Jezza95.

Are you sure that the font being used in IE8 actually has that character? I just looked at several Windows fonts (using Windows' "Character Map" utility) and they don't seem to include it. I suggest you try using "\25BC" and reduce the font-size for it.

P.S. Wouldn't it be better to use classes instead of so many inline styles?

__________________
Spreading knowledge, one newbie at a time. I'm available for hire at Dynamic Site Solutions.

Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

Remember people spend most of their time on other people's sites (so don't violate web design conventions).

Last edited by Kravvitz : March 11th, 2013 at 07:00 PM. Reason: meant "being used", not "being using".

March 11th, 2013, 06:21 PM

Jezza95

Registered User

Join Date: Mar 2013

Posts: 14

Time spent in forums: 3 h 53 m 59 sec
Reputation Power: 0

Hey Kravvitz,

Many thanks for the warm welcome to Dev Shed!

I was going to reply sooner but I've been busy elsewhere.

I'm glad to say that I've managed to figure it out for myself and I will be posting my solution tomorrow for people to review

You are indeed very right about the inline styles. But with me being lazy, I just couldn't be bothered to make the effort at the time to copy the styles into individual classes.

However, ill tidy the code up tomorrow and sort all the inline styles and put them in to classes to neaten everything up.

Excuse me for any typos, I'm replying on my phone and its forever auto predicting words as I'm typing haha

Thanks for all your help on this!

Josh.

March 12th, 2013, 04:02 AM

Jezza95

Registered User

Join Date: Mar 2013

Posts: 14

Time spent in forums: 3 h 53 m 59 sec
Reputation Power: 0

My Solution :)

Good morning,

After spending hours of trying to get this to work (which you more experienced coders could of done in 2 minutes) - I finally got the menu working the way I wanted it to!

Here's the extra code I added to the CSS for anyone who's interested in pulling off the same effect that I was looking for.

The only difference with the HTML part, is that the class name is just "arrow" in appose to "arrow-down" on the top level list.

Code:


#top-l-nav ul li .arrow {
    
    background: url("../images/arrow-off.png");
    height: 6px;
    width: 11px;
    margin: -10px 0 0 109px;
}

#top-l-nav ul li:hover .arrow {
    
    background: url("../images/arrow-on.png");
}

Thanks again

Question regarding dropdown menus

Developer Shed Advertisers and Affiliates