CSS Coding Help. - Post ID 242768
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.
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.
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.
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
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
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.
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.
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.
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.
Thanks for help!
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
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Hi Steve,
How do I go about doing that?
Thanks for the help.
How do I go about doing that?
Thanks for the help.
Change this part:
/*sub menu*/
ul#menu li ul.sub-menu {
display:none;
position: absolute;
top: 25px;
left: 0;
width: 150px;
}
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
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
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
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
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
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
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.