#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    14
    Rep 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
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    298
    Rep Power
    8
    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.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    14
    Rep 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 :)
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Originally Posted by Jezza95
    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.
    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?
    Last edited by Kravvitz; March 11th, 2013 at 07:00 PM. Reason: meant "being used", not "being using".
    Spreading knowledge, one newbie at a time.

    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).
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    14
    Rep 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.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    14
    Rep 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

IMN logo majestic logo threadwatch logo seochat tools logo