Drop-Down CSS Menu (sub-links hide) - drop-down-menu

can anyone tell me what I have done wrong in creating this vertical CSS dropdown menu. The sub-level "hides" under the CSS quote element underneath. The CSS menu has been sought and uses styled lists.
Would this be a Z index issue or positional issue or am I just a doughnut?
Here is the code link on Pastebin : http://pastebin.com/CBuT532G
(I can never copy my code into the code option here, which doesn't bode well!)
Gutted I can't show a screen grab!
Cheers

just add z-index 1 in your dropdown-menu css
ul.dropdown-menu {
border-radius: 10px 10px 10px 10px;
display: table;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
z-index: 1;
}

Make instead of <ul class="dropdown-menu"> to <ul class="dropdown-menu" style="z-index: 999;">
Works for sure! :)

Related

css dropdown menu very slow on windows mobile

I am having a very slow menu drop down experience on windows mobile only. it works ok on chrome and android pc's etc.
image of drop down, GREEN sub menu is very very slow to apper on windows mobile phones (only) you have to keep the logon pressed for at least 1.5 secs before sub menu appears. I would be grateful if somebody could look at the CSS code an see if I need to add / alter any of the settings in CSS
small piece of my nav code
<nav>
<ul id="main-nav" class="clearfix">
<li> Log in
<ul>
<li> Members area </li>
<li> Rythe Centre </li>
<li> Members Email IT Support</li>
</ul>
</li>
</nav>
#main-nav a {
font-size: 100%;
padding: 6px 5px 3px 3px;
margin: 0px;
}
#main-nav a:hover {
padding-right:20px;
}
#main-nav ul a {
padding: 6px;
height: 10px;
width: auto;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
font-size: 100%;
background: #090;
}
#main-nav ul a:hover {
background: #000;
}
#main-nav ul ul li:first-child a:after {
position:absolute;
left: -8px;
}
#main-nav ul ul {
top: 0;
left: 90px;
}
#main-nav ul a {
width: auto;
}
#main-nav ul ul a {
background: #f90;
I eventually found the solution, in this post
4 novel ways to deal with sticky :hover effects on mobile devices..
http://www.javascriptkit.com/dhtmltutors/sticky-hover-issue-solutions.shtml
emphasized textCSS's venerable :hover pseudo class forms the backbone of many CSS effects, triggered when the mouse rolls over an element on the page. In today's changing landscape however where touch screen inputs share center stage with the mouse, this has presented a bit of a conundrum for webmasters. Touch based devices in an effort to not be left out in the cold with such a pervasive CSS feature do respond to hover, but in the only way that's possible for them, on "tap" versus an actual "hover". While this is overall a good thing, it leads to what's known as the "sticky hover" issue on these devices, where the :hover style stays with the element the user just tapped on until he/she taps again elsewhere in the document, or in some circumstances, reloads the page before the effect is dismissed.
I have used Method 4- Dynamically add or remove a "can-touch" class based on current user input type.
Good luck.
Mark

displaying labels horizontally instead of vertically in thymeleaf [duplicate]

So, I have attempted to create a horizontal list for use on a new website I am designing. I have attempted a number of the suggestions found online already such as setting 'float' to left and such - yet none of these have worked when it comes to fixing the problem.
ul#menuItems {
background: none;
height: 50px;
width: 100px;
margin: 0;
padding: 0;
}
ul#menuItems li {
display: inline;
list-style: none;
margin-left: auto;
margin-right: auto;
top: 0px;
height: 50px;
}
ul#menuItems li a {
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-weight: bolder;
color: #000;
height: 50px;
width: auto;
display: block;
text-align: center;
line-height: 50px;
}
<ul id="menuItems">
<li>
Home
</li>
<li>
DJ Profiles
</li>
</ul>
Currently I am unsure of what is causing this issue, how would I go about and resolve it?
Updated Answer
I've noticed a lot of people are using this answer so I decided to update it a little bit. No longer including support for now-unsupported browsers.
ul > li {
display: inline-block;
/* You can also add some margins here to make it look prettier */
}
<ul>
<li> some item
</li>
<li> another item
</li>
</ul>
This fiddle shows how
http://jsfiddle.net/9th7X/
ul, li {
display:inline
}
Great references on lists and css here:
http://alistapart.com/article/taminglists/
I guess the simple solution i found is below
ul{
display:flex;
}
A much better way is to use inline-block, because you don't need to use clear:both at the end of your list anymore.
Try this:
<ul>
<li>
some item
</li>
<li>
another item
</li>
</ul>
CSS:
ul > li{
display:inline-block;
}
Have a look at it here : http://jsfiddle.net/shahverdy/4N6Ap/
You could also use inline blocks to avoid floating elements
<ul>
<li>
some item
</li>
<li>
another item
</li>
</ul>
and then style as:
li{
/* with fix for IE */
display:inline;
display:inline-block;
zoom:1;
/*
additional styles to make it look nice
*/
}
that way you wont need to float anything, eliminating the need for clearfixes
Here you can find a working example, with some more suggestions about dynamic resizing of the list.
I've used display:inline-block and a percentage padding so that the parent list can dynamically change size:
display:inline-block;
padding:10px 1%;
width: 30%
plus two more rules to remove padding for the first and last items.
ul#menuItems li:first-child{padding-left:0;}
ul#menuItems li:last-child{padding-right:0;}
strong tex
ul {
list-style: none;
display: flex;
justify-content: space-around;
}
<ul>
<li>bla</li>
<li>blabla</li>
<li>blablabla</li>
</ul>

Add custom arrow to Zurb-Foundation drop-down buttons

I created a button using Zurb Foundation styles and Sass mixins. I used #include dropdown-button($base-style:false); to get rid of the default arrow style. Now I want to insert my own arrow in its place (right side)
Here is the default button:
Here is my button now:
I want mine to look something like this:
Here is my html:
<a class="login width-limit" href="#" data-dropdown="drop">Client_Test_1 </a><br>
<ul id="drop" data-dropdown-content class="f-dropdown">
<li>Logout</li>
<li>Account Settings</li>
<li>Change SMTP Settings</li>
</ul>
Here is my scss:
.login {
#include grid-column(2);
#include button();
#include dropdown-button($base-style:false);
font-family: $font-stack;
font-size: .9em;
color: #fff;
background-color: $secondary-color;
height: 27px;
border-radius: 7px;
margin: 6px 0 5px 0;
padding: 5px 4px 5px 4px;
}
.width-limit {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 2em; //shrink text
}
.login:hover {
background-color: $primary-color;
}
Here is a fiddle: http://jsfiddle.net/Yq5uU/
How can I add my own custom arrow to make it look like the third example?
Thanks in advance.
You can't make it infinitely long and not break page layout. So simple solution will be deciding how long it can get and setting button container to fill maximum amount of columns before it starts to look wired. Then you can align your button inside the container as you wish and if it gets too long you can replace part of the name with "..." css:overflow:hidden; text-overflow:ellipsis; or show the short form with js.
example: http://jsfiddle.net/z8aWL/2/
The grid column 2 mixin gives you this:
width: grid-calc($columns, $total-columns);
If you're using the default 12 grid, your inputs look like this:
width: grid-calc(2, 12);
The calc function returns the percentage of 2 divided by 12
width: 16.67%;
You are then overwriting that width value with 150px. If you're using default grid values for large rows, that should be closer to 167px wide.
You should avoid setting hard px values if you want to keep this responsive.
Now as for long names, you have two basic options. Either truncate names, by hiding overflow (as JAre suggested) or let crazy long names break your grid, but be contained in the button. Then you would need to not set a width. All the grid col mixin does is give you a width percentage. The row sets the value of the width (of which the col is a percentage). Your button is still contained in a row, so you should be good to go.
I think your best option, if you have access to your username database is to find the "worst case scenario" and design for that. Or better yet, have a shortened name value returned to your design in the first place.

List item inline-block issue in IE8

I have a horizontal list of color swatches, and each list item has the following markup:
<li class="ws-filter">
<a class="ws-swatch-link" title="Black" href="#">
<div title="Black" class="ws-filter-swatch" style="background-color: #000000;"></div>
</a>
</li>
However, a selected color swatch has the following markup (no anchor tag):
<li class="ws-filter ws-selected">
<div title="Silver" class="ws-filter-swatch" style="background-color: #c0c0c0;"></div>
</li>
Here's the CSS:
.ws-filter-list .ws-filter {
display: inline-block;
}
.ws-filter-swatch {
width: 20px;
height: 20px;
border: 1px solid #dcdcdc;
margin: 2px;
}
And here's the JSFiddle: http://jsfiddle.net/nHk27/2/
This works just fine in most browsers, and looks like the following:
However, in IE8, the selected swatch pops out of line, like this:
This is a project I'm working on, and I can't change the markup. I've tried experimenting with changing the display of the div, anchor and list item in different combinations. I'm pretty sure I could get it to work using float, but is there any way to fix this without using float?
Try
vertical-align: middle;
I have a strong hunch IE8's default puts the content up on top.
Since you're not posting any relevant CSS, I can only suggest you to use IE hacks technique to target IE8 in your case, try something like this:
.ws-filter div[title="Silver"] {
margin-top: 20px\0/ /* or margin-bottom: -20px. The value here can changed based on your context */
}

Safari 7.0 Voice Over & CSS Overflow property?

I have the following scenario below-
HTML
<ul>
<li>Messi</li>
<li>Ronaldo</li>
<li>Neymar</li>
<li>Fabregas</li>
<li>Rooney</li>
<li>Bale</li>
<li>Ozil</li>
<li>Gerrard</li>
<li>Torres</li>
</ul>
CSS
ul{
list-style-type: none;
max-height: 65px;
outline:none;
overflow: auto;
width:200px;
}
li{
height: 20px;
padding: 10px 0;
text-indent: 10px;
width: 200px;
}
Now when i open this in Safari 7.0 (Mavericks) & use Voice Over Reader, first few items the black outline comes around the <li> items but after that the Voice Over reads the items but the black outline doesn't come on them. Also the items are hidden below the overflow clipped region.
This works fine in Safari 6.0.
I believe it has got to do something with the overflow property.
Any explanation & solution for this? Help is appreciated.
Thanks.

Resources