CSS Coding Help. - Post ID 242768

User 2623310 Photo


Ambassador
282 posts

Hi All,

I was wondering if someone would help me. Below is the css code that I'm using to create a drop down menu.

ul#menu, ul#menu ul.sub-menu {
padding:0;
margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration: none;
color: #fff;
background: #2a2c2b;
padding: 5px;
display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
display:none;
position: absolute;
top: 30px;
left: 0;
width: 175px;
}
ul#menu li:hover ul.sub-menu {
display:block;
}

My question is I would like the background for the drop down to be fix width. Right now the background follows the words.
Here's a example of the list:
contact us
terms
license

I would like it be like this site. When you hover over community the background for the drop down is a fix width.

Thanks for any help.
User 2088758 Photo


Senior Advisor
3,086 posts

Hi Scott,

Could you provide a link to your page with this menu. It often helps us troubleshoot better if we can see it live in action.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2623310 Photo


Ambassador
282 posts

Hi Steve,

Here's the to the test page

http://fancypigeonauction.com/menutest/menutest.html

If you go and hover on forms to see what I'm taking about.

Thanks for the help.
User 103173 Photo


VP of Software Development
0 posts

Scott Larson wrote:
Hi Steve,

Here's the to the test page

http://fancypigeonauction.com/menutest/menutest.html

If you go and hover on forms to see what I'm taking about.

Thanks for the help.

Try this:

http://s4.postimg.org/bkugmpual/Screen_Shot_2014_12_31_at_10_45_13_AM.png

/* Default CSS */
/* Generated by the CoffeeCup HTML Editor - www.coffeecup.com */

/*Initialize*/
ul#menu, ul#menu ul.sub-menu {
padding:0;
margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration: none;
color: #fff;
background: #2a2c2b;
padding: 5px;
display:block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
display:none;
position: absolute;
top: 30px;
left: 0;
width: 175px;
}
ul#menu li:hover ul.sub-menu {
display:block;
}
ul#menu ul.sub-menu li {
display: block;
}
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 2623310 Photo


Ambassador
282 posts

Thanks for help!:)
User 2088758 Photo


Senior Advisor
3,086 posts

Hey Scott you may also want to address the gap between the main menu and the submenu. I often cannot get to the sub menu unless i move the mouse very fast from the main to the sub.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2623310 Photo


Ambassador
282 posts

Hi Steve,
How do I go about doing that?

Thanks for the help.;)
User 2088758 Photo


Senior Advisor
3,086 posts

Change this part:

/*sub menu*/
ul#menu li ul.sub-menu {
display:none;
position: absolute;
top: 25px;
left: 0;
width: 150px;
}
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2088758 Photo


Senior Advisor
3,086 posts

By the way Scott,

Have you thought about using CC Menu Builder. Its a much more intuitive way to build menus. You can find more about it here:

http://www.coffeecup.com/menu-builder/

And this tutorial shows you how to add it to a website. If you are not using RLM that's ok just insert the code to your webpage where you want it to appear and ignore the RLM references.

https://www.youtube.com/watch?v=LBDQvtnQZxw
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2623310 Photo


Ambassador
282 posts

Hi Steve,

I do have the Menu builder but I can't seem to get the look how I what it to. I found this simple css for the menu so I decided to go what that.

Thanks

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.