Drop Down Menu

sksanjeeb95 · September 22, 2016, 5:56pm

I am trying to add drop down menu widget in my blog but drop down not showing in my blog although when i run the same code in css compiler it run successfully please open the link to see my code since stack overflow do not allow me to paste the code.please open link to see code.my blog is techspot95.blogspot.com. Please click Code link to see my code.

m3g4p0p · September 22, 2016, 6:42pm

Hi @sksanjeeb95, the minified code does not really help. Is it actually yours, or are you just asking how to include it? On that blog the dropdown seems to work anyway…

Mittineague · September 22, 2016, 6:57pm

courtesy of http://www.cleancss.com/css-beautify/

@charset 'UTF-8';
/* Starter CSS for Flyout Menu */

#cssmenu {
    padding: 0;
    margin: 0;
    border: 0;
    width: auto
}
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul ul {
    list-style: none;
    margin: 0;
    padding: 0
}
#cssmenu ul {
    position: relative;
    z-index: 597;
    float: left
}
#cssmenu ul li {
    float: left;
    min-height: 1px;
    line-height: 1em;
    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: 1px;
    left: 99%
}
#cssmenu ul li:hover > ul {
    visibility: visible
}
#cssmenu ul ul {
    top: 1px;
    left: 99%
}
#cssmenu ul li {
    float: none
}
#cssmenu ul ul {
    margin-top: 1px
}
#cssmenu ul ul li {
    font-weight: normal
}
/* Custom CSS Styles */

#cssmenu:after,
#cssmenu ul:after {
    content: '';
    display: block;
    clear: both
}
#cssmenu a {
    color: #333;
    display: inline-block;
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
    font-size: 12px;
    padding: 0 20px;
    text-align: center;
    text-decoration: none
}
#cssmenu a:hover {
    background: #f6f6f6;
    border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    position: relative;
    top: 0
}
#cssmenu ul {
    background: #e5e5e5;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    list-style: none
}
#cssmenu > ul {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAoCAIAAACw1AcgAAAAA3NCSVQICAjb4U/gAAAAHUlEQVQImWN4+vQpEwMDAxMDAwPT////4exBIgYA2loa5nAttNYAAAAASUVORK5CYII=) 100% 100%;
    background: -moz-linear-gradient(top, #e5e5e5 0%, #ddd 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e5e5e5), color-stop(100%, #ddd));
    background: -webkit-linear-gradient(top, #e5e5e5 0%, #ddd 100%);
    background: -o-linear-gradient(top, #e5e5e5 0%, #ddd 100%);
    background: -ms-linear-gradient(top, #e5e5e5 0%, #ddd 100%);
    background: linear-gradient(#e5e5e5 0%, #ddd 100%);
    box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.3);
    padding-top: 5px;
    width: 100%
}
#cssmenu > ul > li {
    float: left;
    padding: 0 10px;
    position: relative
}
#cssmenu > ul > li:hover > a {
    background: #f6f6f6;
    border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    position: relative
}
#cssmenu > ul > li a {
    line-height: 35px
}
#cssmenu > ul > li a:hover {
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none
}
#cssmenu .has-sub:hover ul {
    display: block
}
#cssmenu .has-sub a {
    display: block;
    position: relative
}
#cssmenu .has-sub > a:after {
    content: '';
    display: block;
    width: 10px;
    height: 9px;
    position: absolute;
    right: 5px;
    top: 50%;
    margin-top: -5px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjRCQjdBNUNENDkzMTExRTI4NENBRkFDOUM5MUY0QzI2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjRCQjdBNUNFNDkzMTExRTI4NENBRkFDOUM5MUY0QzI2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEJCN0E1Q0I0OTMxMTFFMjg0Q0FGQUM5QzkxRjRDMjYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEJCN0E1Q0M0OTMxMTFFMjg0Q0FGQUM5QzkxRjRDMjYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4qSqkdAAAAtUlEQVR42nyOPQ6DMAyF3bSIKXeplGP0IL1EpU5dkZiQeoDegBt0ZO4BOjORABL5oX4RZCniDZbl99nPh6ZpjkR0pn19TlxclmW7lHOOANZSykue55uQtZbatiXBfdV1Hc3zvAnCY12FUqrm02Xf93/QOI40TdOLmadYZoUxhkIICUKC1hpthRJB3viy8ViMKCR470v23glcdB+GIT7PACEBSauZQN70eBrP4zIn3JC0+j8BBgCxDV02ZQEC4wAAAABJRU5ErkJggg==);
    -webkit-transform: rotate(360deg)
}
#cssmenu .has-sub ul {
    background: #f6f6f6;
    border: 1px solid #ddd;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    display: none;
    padding: 10px 0;
    position: absolute;
    left: 50%;
    top: 34px;
    margin-left: -70px;
    width: 140px;
    z-index: 1
}
#cssmenu .has-sub ul li:hover > a {
    background: #ddd;
    color: #ae0001;
    border-color: #e5e5e5 transparent transparent transparent
}
#cssmenu .has-sub ul a {
    line-height: 160%;
    padding: 8px 0
}
#cssmenu .has-sub .has-sub a:after {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjgwRkJGQzk4NDkzMTExRTI4M0U0QzE5NjJFN0U3RjNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjgwRkJGQzk5NDkzMTExRTI4M0U0QzE5NjJFN0U3RjNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODBGQkZDOTY0OTMxMTFFMjgzRTRDMTk2MkU3RTdGM0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODBGQkZDOTc0OTMxMTFFMjgzRTRDMTk2MkU3RTdGM0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6DuTwoAAAAtUlEQVR42nyOsQ3CMBBFj4CVyktkAvZgEJZAoqKNoMoEjMAGzEDnhtKyGztxYzvmznIsIUX5kq2T/rv7fyeE2APAEbb1OeAXGGObVAgBCHxxzk9t265C3ntQSkGD82CMgZTSKkge6pwB7HmXUibn3N/TWif0nsQ0ZbEfxxHmea6XyLTW0jjQl8Gu675o3IqRNU0TxBgf6L0rWHTFuFweAaAESlrMCuJmpNJUni5jwoWSFv8nwAA0tXChxwneNwAAAABJRU5ErkJggg==);
    -webkit-transform: rotate(360deg)
}
#cssmenu .has-sub .has-sub ul {
    background: #ddd;
    left: 100%;
    top: 0;
    margin-left: 0
}
#cssmenu .has-sub .has-sub ul a {
    background: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0
}
#cssmenu .has-sub .has-sub ul a:after {
    background-image: none
}
#cssmenu .has-sub .has-sub ul a:hover {
    background: #bfbfbf
}

sksanjeeb95 · September 22, 2016, 7:56pm

Only submenu do not show other work fine. Actually submenu hide by main part.

ralphm · September 23, 2016, 1:11am

@sksanjeeb95 It would be helpful if you could post a demo on CodePen or jsFiddle etc. that demonstrates the issue. Otherwise we’re just guessing.

We need to see that happening to know what’s going on.

sksanjeeb95 · September 23, 2016, 6:43am

I do not how can i express my view. But anyway i will try my best.

first i go layout and and widget through html/Javascript. Code i already mention above now everything works fine except sub-menu when i click tab. But it show sub-menu when i move this widget to main layout but this alter the layout manager. In short my sub-menu do not able to overlap main content when i add it above cross column and when i move it to main it works fine.please open Link to see video.

ralphm · September 23, 2016, 7:38am

That kind of thing is usually to do with some kind of overflow: hidden rule on a particular container. You’ll have to track it down, though, as we don’t have a live link.

sksanjeeb95 · September 23, 2016, 8:12am

I totally search through my blog but there is no overflow word in my blog. template link .

PaulOB · September 23, 2016, 8:57am

Hi,

Add this css and the menu will show.


#cssmenu ul{overflow:visible}

The problem was that the menu was being hidden by this rule which cascaded into your menu styles.

.tabs .widget ul, .tabs .widget ul {
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
}

If you add ‘#cssmenu ul{overflow:visible}’ it will now allow the submenu to show.

Correct

It was in the first post

ronpat · September 23, 2016, 9:11am

So it is. I completely missed it, too… and I went back a couple of times looking for a link of some kind. Easy to miss. You have excellent eyes, Mr Paul.

sksanjeeb95 · September 23, 2016, 9:21am

Finally it works thanks.But i search for overflow but why i am not able to find overflow word in my template.: hidden.

MiloshN · September 23, 2016, 10:23am

Maybe you can use frameworks?

Gandalf · September 23, 2016, 10:25am

@MiloshN can you explain how that would help the OP with his problem?

MiloshN · September 23, 2016, 10:28am

Only few classes solve this problem.

sksanjeeb95 · September 23, 2016, 10:35am

One more question i want that arrow should only appear in menu bar not in sub-menu.
How can i remove arrow symbol from sub-menu. Code Link .

PaulOB · September 23, 2016, 10:39am

Just use your browser developer tools to inspect the element and the rule is listed as I have shown above.

The more familiar you get with the devtools the easier it gets

sksanjeeb95 · September 23, 2016, 10:40am

One more question i want that arrow should only appear in menu bar not in sub-menu.
How can i remove arrow symbol from sub-menu. Code Link .

sksanjeeb95 · September 23, 2016, 10:41am

can u please explain in detail since i am beginner in web programming.

MiloshN · September 23, 2016, 10:59am

If you know how work css and html, better for you is to learn some of css frameworks (my recommended is Bootstrap). Other, maybe is better put your code here : https://jsfiddle.net/
Have a nice day.
Ps. It’s only my opinion.

PaulOB · September 23, 2016, 11:04am

Hi,

The dropdown arrow in the nested ul is controlled via this rule:

#cssmenu .has-sub .has-sub a:after {}

Therefore if you want to remove it then do this:

#cssmenu .has-sub .has-sub a:after {display:none}

Although as your sub menus also have submenus you might want to change the image to a right facing arrow instead to indicate another sub level.