How can I get drop-down functionality working with CSS?


Tags: css,content-management-system,drupal-7,drop-down-menu,drupal-themes

Problem :

I've been messing with this site's css FOREVER. I can't figure out how to get the "medical" menu item to drop-down and display the rest of the hidden menu items. I've been able to unhide them and expand but not get them to drop-down. What have I got to change, specifically? I tried some tutorials, but maybe I targeted wrong? Also, I'm editing a theme. Maybe something is interfering? Please, help me by inspecting the CSS below and recommending some changes.

thank you!

http://madhwaparishat.co.uk/drupal/sites/all/themes/sky/css/style.css?lj2u6r

http://madhwaparishat.co.uk/drupal/



Solution :

Try this:

.expanded a:hover + ul,
.expanded ul:hover {display:block !important;z-index:99999;}
.menu ul{position:absolute;}
.menu li{float:left}
.menu .menu a{width:100px}

There's a ton of crazy css @imports on your site, hard to debug. The ! important rule was necessary.

You also need to pick a specific width for you dropdown links, I used 100px.

Hope this helps, I wasn't going to answer but I saw people trying to throw Suckerfish at you, and that's not what you're after - you want to do it yourself. Totally understand.

EDIT: This will probably have to be tuned or javascript will need to be involved if you want to support IE6 and 7.

EDIT: Came back and trimmed the code. There was too much before and it was confusing.


    CSS Howto..

    How to output element.style.marginTop using digits only?

    How to space children evenly horizontally in css

    How to get the CSS style from Inspect Element

    how to make small loading circle by changing css height and width?

    How to style a png icon with CSS?

    How can I enable CSS selector profiling in Chrome

    how to flip the div using css?

    How to add custom fonts [duplicate]

    HTML, CSS: how can I merge these divs in order to use float:left property on their children?

    How to right and left align every alternate list item in html and css along with the bullets

    How to “add details” to CSS (example Box shadow)

    How do I center text next to a floating image using css?

    How to Use jquery Animate() with .slideToggle() Between Two Classes

    How to make this CSS layout

    How to get just the responsive grid from Bootstrap 3?

    How to get div columns to be same height?

    How to add Video from project directory in the background of Div

    CSS/PHP: How to make the next div appear on the side instead

    How to make gridview and cells bigger?

    CSS - How can I push the submenus to the left?

    JS+CSS How to display images from an array from top right to bottom left

    How to adjust CSS settings for jquery.simply-scroll plugin to occupy full screen

    How to remove width with center DIV

    HTML/CSS/JS: How to force browser to save password from a non-'password' type input?

    How to add a color in the
    bottom content area?

    CSS - how to apply styles to first elements in a static generated list

    How to make dropdown list unselectable?

    How to set caption for youtube videos box in css?

    How do I split a WordPress theme into 2 columns?

    “div” into an “a” is wrong. So, how can I do this? (HTML4, CSS2, crossbrowser)