I have an issue with iOS not loading the dropdown menu links, it works fine in others, only iOS.
Live Site: http://sandbox.myramani.com/espace/
Basically when you view it via any iOS browser, the navigation dropdown links do not link to the interior pages, instead it just refreshes the homepage. Can anyone help me figure out why this is occurring?
CSS:
#nav ul li ul.dd {
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
position:absolute;
z-index:99;
top:60px;
left:0px;
margin-left:0px;
width:220px;
background:#fff;
display:none;
box-shadow: 0px 0px 10px rgba(0,0,0,.4);
padding-bottom:10px;}
#nav ul li:hover ul.dd, #nav ul li:focus ul.dd {
display: block;
}
What is the reason for:
onclick="return true"
on the ? Could be the issue. I don't see the need for an JS on those.
IOS ignores any links that have display:none OR visibility:hidden -- even if the :hover shows it. I can't remember the specifics.
Now I have the quote from Apple:
"if the contents of the page changes on the
mousemove event, no subsequent events in the sequence are sent."
Replace with the following:
#nav ul li ul.dd {
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
position:absolute;
z-index:99;
top:60px;
left:0px;
margin-left:0px;
background:#fff;
opacity:0; /* added */
width:0px;/* added */
height:0px;/* added */
overflow:hidden;/* added */
box-shadow: 0px 0px 10px rgba(0,0,0,.4);
padding-bottom:10px;
}
#nav ul li:hover ul.dd, #nav ul li:focus ul.dd {
opacity:1;
width:220px;
height:auto;
overflow:visible;
}
Related
i have a problem fitting text into blocks (dropdown menu) in CSS.
The code is in Serbian language, but if needed i can translate it to english.
Ok, so i have "Ponuda usluga", when i mouse over that, i get dropdown menu with "Lov" , "Obuka Pasa", "Ribolov" and "Obezbedjivanje potrebne dokumentacije", but the problem is the last one does not fit and proceedes to go under in next line, like shown on screenshot1 here https://ibb.co/YbTytJw (NOTE: at the screenshot i was hovering over "ribolov", thats why its orange).
I would like it to be like this screnshot2 https://ibb.co/dW65Tyx.
Same problem when i hover over "Lov" (that opens a new dropdown menu with 2 options there) like shown on screenshot3 https://ibb.co/0ZKxVWj (Note: I added >> to point out that there is another dropdown menu, and again, i was hovering over "lov", so thats why its orange). Same as the first problem, i need it to say "lov na sitnu divljac" and underneath "lov na krupnu divljac", instead it says "lov na sitnu", "lov na krupnu" and underneath "divljac". I need it to be like screenshot4 https://ibb.co/8zspMY0.
<style>
*{
padding:0;
margin:0;
box-sizing:border-box;
}
html{
height:100%;
}
.wrapper{
min-height:100%;
width:100%;
position:relative;
}
body{
height:100%;
background:#ddd;
}
h2{
padding:50px;
background-color:#161B21;
color:#f0f1f5;
font-family: big john;
text-align:center;
font-size:30pt;
letter-spacing:15px;
}
.navigationDesktop{
background-color:#161B21;
}
nav{
height:40px;
width:700px;
display:block;
margin:0 auto;
text-align:center;
text-transform: uppercase;
}
nav a{
display:block;
text-decoration:none;
font-family:monospace;
font-weight:bold;
font-family:13pt;
color:white;
}
nav a:hover{
background-color:#F4A950;
color:#f0f1f5;
}
nav ul{
list-style:none;
}
nav ul li{
float:left;
width:140px;
height:40px;
line-height:40px;
background-color:#161B21;
list-style-type: none;
}
nav ul ul li{
position:relative;
display:none;
}
nav ul ul ul{
display:none;
}
nav ul li:hover ul li{
display:block;
animation: navmenu 500ms forwards;
}
#keyframes navmenu{
0%{
opacity:0;
top:5px;
}
100%{
opacity:1;
top:0px;
}
}
nav ul ul li:hover ul{
display:block;
position:absolute;
width:140px;
left:140px;
top:0px;
}
</style>
Here is the pastebin of the HTML https://pastebin.com/MLweR454
And here is the pastebin of the CSS https://pastebin.com/mtszKhNu
That is happening because you are trying to set each nav link block size by using line-height:40px, that creates 40px of space between each line of text. What you want do to is set your nav a to line-height:1.1;, no px, and make the size of the link block be based of the amount of text and padding, by adding padding: 15px 0;
I have a CSS design problem for a day and a halve now and it is driving me nuts. I have an horizontal navigation bar with a single unordered list inside. Each list item contains an anchor (or hyperlink) to a page within the website, the CSS is as follows:
nav#main{
background:#000;
width:100%;
overflow:auto;
}
nav#main ul{
list-style:none;
}
nav#main li{
float:left;
display: block;
overflow:auto;
}
nav#main a{
display:block;
padding:1em;
color:#FFF;
text-transform:uppercase;
font-size:1.6em;
}
nav#main a:hover{
background:#EF7E05;
background-clip:padding-box;
border-width:0 0 15px 0;
border-image:
url('../images/nav.png')
0
0
25
stretch;
}
And the HTML:
<nav id="main">
<ul>
<li>Link text</li>
<li>Link text</li>
<li>Link text</li>
</ul>
</nav>
<div id="contentArea">
<!-- DIFFERENT DIVS, COLUMS ARTICLES ETC. -->
</div>
This works all like it should work.
However what i am trying to accomplish is that the border image is displayed outside the nav bar and that it doesn't push the contentArea downwards a 25px. Any ideas?
I also tried to absolute position a block with a.hover::after. This works beautifully, however the width of the block cannot be set equal to a. Perhaps any ideas on this one too?
You need to clear your floated elements using a clear rather than overflow:visible
If you do this you can use your absolute positioning to create the border:
nav#main{
background:#000;
width:100%;
}
nav#main:after {
content:'';
display:block;
clear:both;
}
nav#main ul{
list-style:none;
}
nav#main li{
float:left;
display: block;
overflow:visible;
}
nav#main a{
display:block;
padding:1em;
color:#FFF;
text-transform:uppercase;
font-size:1.6em;
position:relative;
overflow:visible;
}
nav#main a:hover{
background:#EF7E05;
}
nav#main a:hover:after{
background-clip:padding-box;
content:'';
position:absolute;
top:100%;
left:0;
right:0;
border-width:0 0 15px 0;
border-image:
url('../images/nav.png')
0
0
25
stretch;
}
Example
I have noticed that the border image thing doesn't work in firefox or ie so this will give you the same effect and is more browser friendly:
nav#main a:hover:after{
background-clip:padding-box;
content:'';
position:absolute;
top:100%;
left:0;
right:0;
height:15px;
background: url('../images/nav.png') left top no-repeat;
background-size: 100% 15px;
}
Example
Have a look at http://www.habitatlandscape.co.uk/
In Firefox and even Internet Explorer (!!!) the pop-up menus appear perfectly, vertically centered in the white strip, and always starting on the far-left-hand-side.
In Chrome, the menus start horizontally under the parent li, and are not centered vertically. I can fix the vertical alignment by targetting webkit with a different position, but I can't fix the horizontal alignment.
Why is Webkit ignoring position:absolute;left:0;?
CSS:
#header #menu
{
margin:0;
padding:0;
}
#header #menu ul
{
list-style-type:none;
margin:0;
padding:0;
margin-top:28px;
height:24px;
}
#header #menu ul li
{
display:inline;
position:relative;
}
#header #menu ul li a
{
display:block;
float:left;
padding:7px;
padding-bottom:3px;
background:#fff;
margin-right:5px;
text-decoration:none;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-family:'museo', serif;
font-size:12px;
text-transform:uppercase;
color:#fff;
font-weight:bold;
padding-left:12px;
padding-right:12px;
background:#01973D;
position:relative;
z-index:2;
}
#header #menu ul li:hover a
{
background:#00BB4A;
}
#header #menu ul li ul
{
clear:both;
display:none;
position:absolute;
top:39px;
width:700px;
margin:0;
padding:0;
}
#header #menu ul li ul li
{
display:block;
}
#header #menu ul li ul li a
{
background:#fff !important;
color:#000;
font-weight:normal;
padding:7px;
padding-left:11px;
color:#01973D;
padding-top:10px;
margin:0;
float:left;
}
#header #menu ul li ul li a:hover
{
color:#000;
}
#header #menu ul li:hover ul
{
display:block;
}
HTML (CMS-generated):
<div id="menu">
<ul>
<li class="parent"><a class="parent" href="http://www.habitatlandscape.co.uk/about-us/"><span>About Us</span></a>
<ul>
<li><span>Company History</span></li>
<li><span>Meet The Team</span></li>
</ul>
</li>
<li class="parent"><a class="menuactive parent" href="http://www.habitatlandscape.co.uk/portfolio/"><span>Portfolio</span></a>
<ul>
<li><span>View before, during and after photos from recent projects</span></li>
</ul>
</li>
<li class="parent"><a class="parent" href="http://www.habitatlandscape.co.uk/services/"><span>Services</span></a>
<ul>
<li><span>Design</span></li>
<li><span>Patios</span></li>
<li><span>Decking</span></li>
<li><span>Turf</span></li>
<li><span>Ponds</span></li>
<li><span>Driveways</span></li>
<li><span>Fencing</span></li>
<li><span>Electrics</span></li>
<li><span>Structures</span></li>
</ul>
</li>
</ul>
// etc
</div>
You've created a mess by display:inline-ing your <li> elements but display:block-ing your <a> elements.
In HTML, it's invalid to nest a block-level element in an inline element:
<span><div>FAIL</div></span>
When you do something like this, you're going to have cross-browser problems. The same goes if you use CSS to change the display property:
<div style="diplay:inline"><span style="display:block">STILL A FAIL</span></div>
Which is what you've done:
#header #menu ul li {
display: inline;
/* ... */
}
#header #menu ul li a {
display:block;
/* ... */
}
That behavior is more or less undefined as far as the specs are concerned (since it makes no sense) so the browser reserves the right to do something insane or ridiculous - which is what you're seeing. It works in Firefox only because you're getting lucky and it works in Internet Explorer because Internet Explorer is inherently insane and ridiculous.
If you want those <li> elements to stack horizontally, float:left them instead of inlining them. Then you can display:block your <a> element without issue. Once that's done you'll still have to switch up which elements are position:relative;-ed, and probably add a left:0 somewhere.
Here's an example of your current issue on jsfiddle, and here's an example of my suggested fix on jsfiddle, which involves positioning the #header #menu ul element relatively instead of the #header #menu ul li.
When I gave the #header #menu ul li a display:inline-block; it fixed it. It also changed the result of the hidden ul's top positioning, which should be 24px to match the height if the button anyways, right?
I've modified some existing CSS code i found to develop a menu. It all works fine except when i hit the drop down menu. if there there is another HTML component on the page, the menu stays behind the component instead of it staying on top (i hope my description makes sense).
Here is the CSS:
#navMenu{
/*font-family: 'Tenor sans', Calibri, Times, Times, serif;*/
margin-left:2px;
/*width: 944px;*/
width:100%;
font-weight:normal;
font-size:15px;
}
#navMenu ul{
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
/*removes the bullet point*/
list-style:none;
float:left;
position:relative;
background-color: #F9F9F9;
}
/*for top level */
#navMenu ul li a{
text-align:center;
font-weight:bold;
font-size:0.8em;
line-height:height;
font-family:Arial,Helvetica,sans-serif;
text-decoration:none; /*remove underline*/
margin:-1px;
/*height width for all links*/
height:30px;
width:150px;
display:block;
/*border-bottom: 1px solid #ccc;*/
color: #00611C;
}
/* hiding inner ul*/
#navMenu ul ul{
position:absolute;
visibility:hidden;
/*must match height of ul li a*/
top:28px;
}
/*selecting top menu to display the submenu*/
#navMenu ul li:hover ul{
visibility:visible;
}
#navMenu li:hover {
/*background-color: #F9F9F9;*/
background-color: #DBDB70;
border-radius: 5px;
}
#navMenu ul li:hover ul li a:hover{
/* color: E2144A;*/
color:#E2144A;
}
#navMenu ul li a:hover{
/*color: E2144A;*/
color:#E2144A;
}
Would anybody be able to tell me whats missing to enable the drop down menu to stay on top?
thanks.
It would be useful to have the HTML code, not just the CSS, to troubleshoot this. But with just the CSS you posted, look into setting a z-index on the elements that are layered backwards from the way you would like.
http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index?redirectlocale=en-US&redirectslug=Understanding_CSS_z-index
use z-index.
#navMenu{
/*font-family: 'Tenor sans', Calibri, Times, Times, serif;*/
margin-left:2px;
/*width: 944px;*/
width:100%;
font-weight:normal;
font-size:15px;
z-index:1;
}
Try giving your menu a z-index: 1; (or higher). You can also lower the z-index of whatever content is covering up your menu.
You need to set the parent that will wrap your menu to be in position: relative, this could be a body or maybe an outer wrapper. Then you can use absolute position to place it always at the top and specify some z-index:
For more information: see this z-index property information in here:
https://bytutorial.com/tutorials/css/css-z-index
I m having trouble with some code and the ie7 browser, its a vertical CATEGORY menu made with the ul tag, and css properties. Works fine with safari, ie8, firefox 3.5 and 3.6 but with ie7 A BIG LEFT MARGIN IS BEING CREATED This is the code that is being generated by the server:
<div id="menu">
<ul><li><a class="level1" href="catalog.html?category=21">PRODUCTOS</a></li>
<li><a class="level1" href="catalog.html?category=21">Daniela Kosan</a></li>
<li><a class="level2" href="catalog.html?category=21">Lo Nuevo</a></li>
<li><a class="level2" href="catalog.html?category=22">Fragancias</a></li>
<li><a class="level2" href="catalog.html?category=23">Rostro</a></li>
<li><a class="level2" href="catalog.html?category=24">Accesorios</a></li></ul>
</div>
and this is the css i'm using:
*{
margin-top:0;
padding:0;
}
#menu{
background:#fff;
width:205px;
padding-left:9px;
}
#menu ul{
list-style:none;
}
#menu li{
list-style:none;
}
#menu li a{
list-style:none;
font-family: arial, sans-serif;
background:#F0CFD6;
color:#944862;
text-transform:none;
font-size:14px;
font-weight:normal;
text-decoration:none;
display:block;
}
#menu li a:hover{
color:#fff;
text-decoration:none;
}
#menu li a.level1{
padding-left:10px;
padding-top:10px;
width:205px;
height:20px;
color:#fff;
background:#DA8298;
}
#menu li a:hover.level1{
color:#000;
}
#menu li a.level2{
padding-left:20px;
padding-top:12px;
width:205px;
height:20px;
color:#8B5169;
border-width:0 0px 0px 0px;
background:#F0CFD6;
border-bottom:1px dashed #CEABB2;
}
#menu li a:hover.level2{
color:#000;
}
Here is the bad render, NOTE THE BIG LEFT MARGIN BESIDES THE CATEGORY MENU
This is how it renders on the other browsers... good! Thank you guys!
Try setting the margin and padding on the ul. Different browser will automatically set it to different things. I suggest using a CSS reset in the future.
#menu ul {
margin-left: 0px;
padding-left: 0px;
}
Try the above and let me know if it works. I don't have IE, so I can't test it. I'd test the margin and padding one at a time to see if only one of them is the culprit.