0

I have a dropdown menu that uses CSS, every time I add a "width: ##px;" bit to it, It somehow morphs the horizontal menu into a vertical mess.. I even tried to add a style width to the DIV tag and no dice.

Here is the CSS (I attached a paste.bin link because the CSS is long):

http://pastebin.com/GS7jHhii

4 Answers 4

1

Positioning absolute DIV's relative to the body will always react on viewport size.

The best thing would be to put your #cssmenu div back into the container div again, but still you can get the result you want using the div order you're using right now.

Change your CSS to the following (you should put back the border-radius stuff back also):

#cssmenu {   

text-align: center;
overflow: hidden;
margin-top:46px;
height: 49px;
width:1200px;  /* Same width as wrapper */
margin-left:auto;
margin-right:auto;
margin-bottom:-95px; /* Hackish, but only possibility in this div order */
}

And at the bottom of your stylesheet (to overrule the others)

#cssmenu>ul {
float:none !important;
display:inline-block;
}

Using negative margins is in my opinion a bit hackish, but it will do what you want.

Note: couldn't test the submenu behaviors since I don't see the submenu's appearing.

Jeroen.

0

edit this ul > li this will change the width of each dropdown in the list

#cssmenu > ul > li {
  float: left;
  width: **px;

}
6
  • all this did was space out the links. check out the site maybe if you see what Im talking about you would have a better idea. www.mannovation.com trying to make the menu the same width as the rest of the page
    – Vishera
    May 26, 2013 at 2:18
  • okay... as you #ccsmenu is the inside the div's wrapper, container and main the maximum width will be limited to the width of these elements minus any padding that is on them in this case a padding on container is not allowing your menu to be the complete width of the page May 26, 2013 at 2:45
  • ... the easiest way to change this is move the menu outside of main and container and then `#cssmenu { width: 100%; } which will make the menu the entire width of the viewable area on any screen resolution May 26, 2013 at 2:48
  • gotcha, I put the <div id="wrapper"> <div id="container"> <div id="main"> after the CSSMenu. it put the menu across the entire page but I think now with some width adjustments and padding, I can move it where I need.. Ill let you know, thanks
    – Vishera
    May 26, 2013 at 3:11
  • okay so i managed to get it all into position that I wanted.. but I noticed if I view it in a smaller resolution or resize the browser window a bit smaller, that it knocks the last item(s) of my menu off and onto a second line.. any idea how to keep that into position regardless of browser size? (id paste what Im using in the css to position it but I cant figure out how to paste in the same format on this site...)
    – Vishera
    May 26, 2013 at 3:41
0

Your dropdown menu is a child list of another list -- your top-level navigation, so you need to target that with CSS.

#cssmenu ul li ul li {
   width: **px;
}
1
  • this only made the menu change vertical.
    – Vishera
    May 26, 2013 at 3:42
0

Instead I found wordpress has a dropdown menu plugin, I just had to register the header for widgets. Its still kinda buggy but once I get it looking right, it should work out..

thank you all for your help, I learned quite a bit from this!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.