I copy this code: http://cssmenusmaker.blogspot.com/2013/01/flat-accented-dropdown-menus.html for create a dropdown menu. But if exists a menu element with subelements the body of the website increases. I located the piece of code that causes this error, but do not know how to correct it.
This piece is:
#cssmenu ul ul ul {
top: 0;
left: auto;
right: -99.5%;}
A MWE:
<html>
<head>
<style type="text/css">
#cssmenu {
padding: 0;
margin: 0;
border: 0; }
#cssmenu ul, #cssmenu li {
list-style: none;
margin: 0;
padding: 0; }
#cssmenu ul {
position: relative;
z-index: 597; }
#cssmenu ul li {
float: left;
min-height: 1px;
vertical-align: middle; }
#cssmenu ul li.hover,
#cssmenu ul li:hover {
position: relative;
z-index: 599;
cursor: default; }
#cssmenu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%; }
#cssmenu ul ul li {
float: none; }
#cssmenu ul ul ul {
top: 0;
left: auto;
right: -99.5%; }
#cssmenu ul li:hover > ul {
visibility: visible; }
#cssmenu ul ul {
bottom: 0;
left: 0; }
#cssmenu ul ul {
margin-top: 0; }
#cssmenu ul ul li {
font-weight: normal; }
#cssmenu a {
display: block;
line-height: 1em;
text-decoration: none; }
/* Custom CSS Styles */
#cssmenu {
background: #333;
border-bottom: 4px solid #1b9bff;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 12px; }
#cssmenu > ul {
*display: inline-block; }
#cssmenu:after, #cssmenu ul:after {
content: '';
display: block;
clear: both; }
#cssmenu ul {
text-transform: uppercase; }
#cssmenu ul ul {
border-top: 4px solid #1b9bff;
text-transform: none;
min-width: 190px; }
#cssmenu ul ul a {
background: #1b9bff;
color: #FFF;
border: 1px solid #0082e7;
border-top: 0 none;
line-height: 150%;
padding: 16px 20px; }
#cssmenu ul ul ul {
border-top: 0 none; }
#cssmenu ul ul li {
position: relative; }
#cssmenu ul ul li:first-child > a {
border-top: 1px solid #0082e7; }
#cssmenu ul ul li:hover > a {
background: #35a6ff; }
#cssmenu ul ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-moz-box-shadow: 0 1px 0 #1b9bff;
-webkit-box-shadow: 0 1px 0 #1b9bff;
box-shadow: 0 1px 0 #1b9bff; }
#cssmenu ul ul li:last-child:hover > a {
-moz-border-radius: 0 0 0 3px;
-webkit-border-radius: 0 0 0 3px;
border-radius: 0 0 0 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box; }
#cssmenu ul ul li.has-sub > a:after {
content: '+';
position: absolute;
top: 50%;
right: 15px;
margin-top: -8px; }
#cssmenu ul li:hover > a, #cssmenu ul li.active > a {
background: #1b9bff;
color: #FFF; }
#cssmenu ul li.has-sub > a:after {
content: '+';
margin-left: 5px; }
#cssmenu ul li.last ul {
left: auto;
right: 0; }
#cssmenu ul li.last ul ul {
left: auto;
right: 99.5%; }
#cssmenu a {
background: #333;
color: #CBCBCB;
padding: 0 20px; }
#cssmenu > ul > li > a {
line-height: 48px; }
</style>
<link href="cssmenu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Product 2</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</body>
</html>
The body increases to the right, but doesn't increases the dinamic content in the body.
When pass the cursor over the menu element with subelements the body returns to normal.
Here is a patch that I did:
Changed:
#cssmenu ul ul ul {
top: 0;
left: auto;
right: -99.5%;
}
To:
#cssmenu ul ul ul {
top: 0;
left: auto;
right: -99.5%;
display: none; }
And added below it:
#cssmenu ul ul:hover ul {
top: 0;
left: auto;
right: -99.5%;
display: inline-block; }
Fiddle: http://jsfiddle.net/9yxrg/1/
Related
I'm working on this project: http://www.livingthelighterlife.com/
In the top area navigation (Home, About, Contact, Work With Me), I have a submenu drop down. The only active link is "About" - when you hover over it, the submenu appears, as does the up-arrow before it, however, I can't make the background of the up-arrow go away. It should be transparent, but it is showing up as the same pink color as the submenu.
Thanks in advance.
#top-navigation {
float: left;
padding-top: 4px;
}
#top-navigation ul {
list-style: none;
position: relative;
}
#top-navigation ul a {
display: block;
color: #ffffff;
text-decoration: none;
}
#top-navigation ul a:hover {
color: #f68364;
}
#top-navigation ul li {
position: relative;
float: left;
margin: 0px 10px;
}
#top-navigation ul li:hover {
color: #f68364;
}
#top-navigation ul ul:before {
content: '';
display: block;
margin: auto;
width: 0;
height: 0;
background: transparent !important;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #6d5d68;
}
#top-navigation ul ul {
display: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 150px;
background: #f68364;
}
#top-navigation ul ul li {
float: none;
margin: 0px;
}
#top-navigation ul ul a {
display: block;
padding: 10px;
}
#top-navigation ul ul a:hover {
background: #6d5d68;
color: #ffffff;
}
#top-navigation ul ul ul {
top: 0;
left: 100%;
}
#top-navigation ul li:hover > ul {
display: block;
}
<nav id="top-navigation">
<ul>
<li>
Home
</li>
<li>
About
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>
Contact
</li>
<li>
Work With Me
</li>
</ul>
</nav>
In reference to my comment, there may be unintended side effects if you try to maintain a background color on the <ul>. I recommend removing the background: #f68364 from #top-navigation ul ul and instead adding it to #top-navigation ul ul li. I also recommend changing border-bottom: 10px solid #6d5d68; on #top-navigation ul ul:before to border-bottom: 10px solid #f68364;
Move background: #f68364; from #top-navigation ul ul to #top-navigation ul ul a
#top-navigation ul ul a {
display: block;
padding: 10px;
background: #f68364;
}
#top-navigation {
float: left;
padding-top: 4px;
}
#top-navigation ul {
list-style: none;
position: relative;
}
#top-navigation ul a {
display: block;
color: #ffffff;
text-decoration: none;
}
#top-navigation ul a:hover {
color: #f68364;
}
#top-navigation ul li {
position: relative;
float: left;
margin: 0px 10px;
}
#top-navigation ul li:hover {
color: #f68364;
}
#top-navigation ul ul:before {
content: '';
display: block;
margin: auto;
width: 0;
height: 0;
background: transparent !important;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #6d5d68;
}
#top-navigation ul ul {
display: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 150px;
}
#top-navigation ul ul li {
float: none;
margin: 0px;
}
#top-navigation ul ul a {
display: block;
padding: 10px;
background: #f68364;
}
#top-navigation ul ul a:hover {
background: #6d5d68;
color: #ffffff;
}
#top-navigation ul ul ul {
top: 0;
left: 100%;
}
#top-navigation ul li:hover > ul {
display: block;
}
<nav id="top-navigation">
<ul>
<li>
Home
</li>
<li>
About
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>
Contact
</li>
<li>
Work With Me
</li>
</ul>
</nav>
I have dropdown menu (css only)
JSFIDDLE:
>>> jsfiddle <<<
HTML:
<div class="menu">
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design
<ul>
<li>HTML
<ul>
<li>HTML 4 and less
<ul>
<li>TEST 1</li>
<li>TEST 2</li>
<li>TEST 3</li>
</ul>
</li>
<li>HTML 5</li>
</ul>
</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li>Articles
<ul>
<li>Web Design</li>
<li>User Experience</li>
</ul>
</li>
<li>Inspiration</li>
</ul>
</div>
CSS:
.menu {
margin: 100px auto;
text-align: center;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
white-space:nowrap;
}
.menu ul {
background: #efefef;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
}
.menu ul li:hover {
background: blue;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
display: block;
padding: 10px;
color: #757575;
text-decoration: none;
}
.menu ul ul {
background: green;
padding: 0;
position: absolute;
top: 100%;
}
.menu ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid yellow;
position: relative;
}
.menu ul ul li a {
padding: 10px;
color: #fff;
display: block;
}
.menu ul ul li a:hover {
background: red;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top:0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid pink;
position: relative;
}
.menu ul ul ul li a {
padding: 10px;
color: #fff;
display: block;
}
.menu ul ul ul li a:hover {
background: red;
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
top:0;
}
As you see at last submenu, they are not as upper menus. They wrap text and shrink (minimal width).
Q:
How to make them equal (same width as parent) and no text wrap ?
How to simplify this menu (parent, children, ul > li etc.) so I don't need to make new style for each new sub-menu
Thank you in advance.
Try this - this works great on Chrome:
* { white-space: nowrap; box-sizing: border-box; }
.menu {
margin: 100px auto;
text-align: center;
}
/* ULs */
.menu ul {
padding: 0;
position: absolute;
display: none;
background: green;
top: 0;
position: absolute;
list-style: none;
}
.menu > ul {
background: #efefef;
position: relative;
display: inline-table;
}
.menu > ul > li > ul {
top: 100%;
}
.menu li:hover > ul {
display: block;
}
.menu ul ul ul {
left: 100%;
border-left: 1px solid white;
top: -1px;
}
/*LIs*/
.menu li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid yellow;
position: relative;
}
.menu > ul > li {
float: left !important;
border: none;
}
.menu ul li:hover {
background: blue;
}
/* As */
.menu a {
display: block;
padding: 10px;
color: #757575;
text-decoration: none;
}
.menu li:hover a {
color: #fff;
}
.menu ul ul a:hover {
background: red;
}
Also, consider this isn't a good practice (User-experience-wise) to have so many sub menus. You should attempt to re-design your UI to match the usage of your website in a way that won't make the user frustrated.
im using ready made dropdown menu from http://cssmenumaker.com/menu/grey-red-drop-down-menu
the menu is working pretty fine but i like to center the buttons.Is there any way to do that?
Here is the css code:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
/* Menu CSS */#cssmenu,
#cssmenu > ul {
background: url(images/highlight-bg.png) repeat;
padding-bottom: 3px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after {
content: '';
display: table;
}
#cssmenu:after,
#cssmenu > ul:after {
clear: both;
}
#cssmenu {
width: auto;
zoom: 1;
}
#cssmenu > ul {
background: url(images/menu-bg.png) repeat;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu > ul li {
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu > ul > li {
float: left;
position: relative;
}
#cssmenu > ul > li > a {
padding: 23px 26px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 -1px 0 #0d0d0d;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
line-height: 18px;
}
#cssmenu > ul > li:hover > a {
background: url(images/highlight-bg.png) repeat;
text-shadow: 0 -1px 0 #97321f;
text-shadow: 0 -1px 0 rgba(122, 42, 26, 0.64);
}
#cssmenu > ul > li > a > span {
line-height: 18px;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li > a:active {
background: url(images/hover.png) repeat;
}
/* Childs */
#cssmenu > ul ul {
opacity: 0;
visibility: hidden;
position: absolute;
top: 120px;
background: url(images/menu-bg.png) repeat;
margin: 0;
padding: 0;
z-index: -1;
}
#cssmenu > ul li:hover ul {
opacity: 1;
visibility: visible;
margin: 0;
color: #000;
z-index: 2;
top: 64px;
left: 0;
}
#cssmenu > ul ul:before {
content: '';
position: absolute;
top: -10px;
width: 100%;
height: 20px;
background: transparent;
}
#cssmenu > ul ul li {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu > ul ul li a {
padding: 18px 26px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
width: 150px;
border-left: 4px solid transparent;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
#cssmenu > ul ul li a:hover {
border-left: 4px solid #d64e34;
background: url(images/hover.png) repeat;
}
#cssmenu > ul ul li a:active {
background: url(images/menu-bg.png) repeat;
}
Here is the basic html code:
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Product 1</span></a></li>
<li class='last'><a href='#'><span>Product 2</span></a></li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
If you want to center the main menu links, you could try this:
#cssmenu ul {text-align: center;}
#cssmenu ul li {float: none; display: inline-block;}
Rather than float: none, you can just remove the original float on the lis.
If you are worried about the inline-block gaps that appear between the menu items, you could do this:
#cssmenu ul {text-align: center;display: table; width: 100%; word-spacing:-.25em;}
#cssmenu ul li {float: none; display: inline-block; word-spacing:0;}
To avoid the submenu text being centered, try this:
#cssmenu ul {text-align: center;display: table; width: 100%; word-spacing:-.25em;}
#cssmenu ul > li {float: none; display: inline-block; word-spacing:0;}
#cssmenu ul li li {text-align: left;}
I am attempting to center a drop down menu. You can view it here I realize this question has been asked before, but these things are so different that the answers don't really seem to apply.
This is my css
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a
{
margin: 0;
padding: 0;
position: relative;
}
#cssmenu
{
height: 39px;
}
#cssmenu:after,
#cssmenu ul:after
{
content: '';
display: block;
clear: both;
}
.top_level{
height:40px;
}
#cssmenu a
{
height: 22px;
line-height: 26px;
padding-top: 10px;
color: white;
font-family: Georgia;
font-weight: 100;
font-size: 20px;
float: left;
padding-bottom:10px;
padding-left:17px;
padding-right: 17px;
text-decoration:none;
}
#cssmenu ul
{
list-style: none;
margin-left:auto;
margin-right:auto;
}
#cssmenu > ul
{
float: left;
}
#cssmenu > ul > li
{
float: left;
z-index: 2000;
}
#cssmenu > ul > li:hover:after
{
content: '';
display: block;
width: 0;
height: 30px;
position: absolute;
left: 50%;
bottom: 0;
z-index: 10000;
}
#cssmenu .has-sub
{
z-index: 1;
top: 0px;
left: 0px;
height: 30px;
}
#cssmenu .has-sub:hover > ul
{
display: block;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
position:absolute;
z-index:10000;
}
#cssmenu .has-sub ul
{
/*CSS for the size and position of drop down*/
display: none;
position: absolute;
width: 156px;
top: 42px;
left:-20px;
text-align:center;
background-image: url(../images/dropDown.png);
z-index:10000;
}
#cssmenu .has-sub ul li
{
*margin-bottom: -1px;
display:inline-block;
}
#cssmenu .has-sub ul li a
{
/*CSS for drop down menu*/
/*CSS for drop down menu*/
position:relative;
width:150px;
z-index:10000;
font-family:NewsCycleRegular;
font-weight: 300;
font-size: 14px;
text-align:center;
color: white;
filter: none;
display: block;
line-height: 18px;
padding: 3px;
}
#cssmenu .has-sub ul li:last-child a
{
/*CSS for last element in drop down list*/
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
z-index: 10000;
position: relative;
padding-bottom:15px;
}
#cssmenu .has-sub ul li:first-child a
{
/*CSS for last element in drop down list*/
padding-top:10px;
-webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px;
}
#cssmenu .has-sub ul li:hover a
{
/*Hover state for open drop down*/
}
#cssmenu .has-sub .has-sub:hover > ul
{
display: block;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
#cssmenu .has-sub .has-sub ul
{
display: none;
position: absolute;
left: 100%;
top: 0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
#cssmenu .has-sub .has-sub ul li a
{
background: #0c7fb0;
border-bottom: 1px dotted #6db2d0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#cssmenu .has-sub .has-sub ul li a:hover
{
background: #095c80;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
An item wit a drop down would look like this
<li class='has-sub'><a href='surgical_specialties.php'><span>Surgery</span></a><img src="images/divider.png" />
<ul>
<li><a href='laparoscopic_surgery.php'><span>Laparoscopy</span></a></li>
<li><a href='colorectal_surgery.php'><span>Colorectal Surgery</span></a></li>
<li><a href='endoscopy.php'><span>Endoscopy</span></a></li>
<li><a href='vascular_surgery.php'><span>Vascular Surgery</span></a></li>
<li><a href='breast_surgery.php'><span>Breast Surgery</span></a></li>
<li><a href='oncologic_surgery.php'><span>Oncologic Surgery</span></a></li>
<li><a href='general_surgery.php'><span>General Surgery</span></a></li>
<li><a href='thoracic_surgery.php'><span>Thoracic Surgery</span></a></li>
</ul>
</li>
Assuming you mean that drop down menu is not centered with the button from which is its parents, you need to remove reset the margins and paddings of your drop down list to zero.
#cssmenu ul li ul {
margin: 0;
padding: 0;
}
Then, you should be able to go in and play with them to get them to be positioned where you want.
Long time lurker but posting for the first time. I've been searching around already and found a solution to what I'm looking to do but for some reason I'm getting a weird result.
Basically my menu has so many items that I would like to see them in 2 columns. By searching I found that I needed to make the "ul" twice as wide as the "li" and float the "li" left. It is working but now I'm getting a blank space in the 2nd row.
#cssmenu {
padding: 0;
margin: 0;
border: 0;
width: auto;
}
#cssmenu ul,
#cssmenu li {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu ul {
z-index: 597;
}
#cssmenu ul li {
float: left;
min-height: 1px;
vertical-align: middle;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#cssmenu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
#cssmenu ul ul li {
float: left;
width: 250px;
}
#cssmenu ul ul ul {
top: 0;
left: 250px;
width: 500px;
height: 20px;
}
#cssmenu ul li:hover > ul {
visibility: visible;
}
#cssmenu ul ul {
bottom: 0;
left: 0;
}
#cssmenu ul ul {
margin-top: 0;
}
#cssmenu ul ul li {
font-weight: normal;
}
#cssmenu a {
display: block;
line-height: 1em;
text-decoration: none;
}
/* Custom CSS Styles */
#cssmenu {
background: #333333;
border-bottom: 4px solid #1b9bff;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 12px;
}
#cssmenu > ul {
*display: inline-block;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu ul {
text-transform: uppercase;
}
#cssmenu ul ul {
border-top: 4px solid #1b9bff;
text-transform: none;
min-width: 190px;
}
#cssmenu ul ul a {
background: #1b9bff;
color: #ffffff;
border: 1px solid #0082e7;
border-top: 0 none;
line-height: 100%;
padding: 8px 20px;
font-size: 12px;
}
#cssmenu ul ul ul {
border-top: 0 none;
}
#cssmenu ul ul li {
position: relative;
}
#cssmenu ul ul li:first-child > a {
border-top: 1px solid #0082e7;
}
#cssmenu ul ul li:hover > a {
background: #4eb1ff;
color: #ffffff;
}
#cssmenu ul ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-moz-box-shadow: 0 1px 0 #1b9bff;
-webkit-box-shadow: 0 1px 0 #1b9bff;
box-shadow: 0 1px 0 #1b9bff;
}
#cssmenu ul ul li:last-child:hover > a {
-moz-border-radius: 0 0 0 3px;
-webkit-border-radius: 0 0 0 3px;
border-radius: 0 0 0 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#cssmenu ul ul li.has-sub > a:after {
content: '+';
position: absolute;
top: 50%;
right: 15px;
margin-top: -8px;
}
#cssmenu ul li:hover > a,
#cssmenu ul li.active > a {
background: #1b9bff;
color: #ffffff;
}
#cssmenu ul li.has-sub > a:after {
content: '+';
margin-left: 5px;
}
#cssmenu ul li.last ul {
left: auto;
right: 0;
}
#cssmenu ul li.last ul ul {
left: auto;
right: 99.5%;
}
#cssmenu a {
background: #333333;
color: #CBCBCB;
padding: 0 20px;
}
#cssmenu > ul > li > a {
line-height: 48px;
font-size: 12px;
}
#cssmenu img {
vertical-align: middle;
}
Here's my jsFiddle: https://jsfiddle.net/b1hsakq2/1/
I'm missing something in the CSS....
Thanks for the help
The border-top on your first-child in list is causing the 3rd list item to not fit. See the revised fiddle here where I commented it out:
https://jsfiddle.net/b1hsakq2/3/
#cssmenu ul ul li:first-child > a {
/*border-top: 1px solid #0082e7;*/
}
The other option is to keep the above border-top on the first-child, but to even the height within the list, add a border-top to the other list items by adding this:
#cssmenu ul ul li > a {
border-top: 1px solid #0082e7;
}