Fixed see update at bottom
I'm developing a simple CSS-only dropdown menu but I'm having an issue in which the submenu disappears when the mouse enters a 3-4px tall section just inside the first item on the submenu (the :hover background of the first submenu item changes so the mouse is hovering over the first submenu item prior to it disappearing). If you move the mouse very quickly over it and into the rest of the submenu the submenu functions as desired. This is a problem across all major browsers (FF, Safari, Chrome, IE), but strangely it doesn't ALWAYS do it. Every once in awhile I'll load the page and it works perfectly even when I intentionally put the mouse in the problem location. Relevant code below:
CSS
#Nav{ /* The top level UL */
clear:right;
float:right;
width:auto;
margin-top:7px;
}
#Nav li{
float:left;
position:relative;
line-height:30px;
padding:0;
background:#086A9F url(/Content/images/NavTab_grad.png) repeat-x center top;
font-size:13px;
z-index:999;
margin:0 0 0 1px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border:1px solid transparent;
}
#Nav li ul{ /*Submenu UL */
display:none;
}
#Nav li:hover ul{
display:block;
position:absolute;
left:-1px;
background:#fff;
z-index:1000;
border:1px solid #ccc;
border-top:none;
width:200px;
top:31px;
}
#Nav li ul li{
background:#fff;
float:none;
border-bottom:1px solid #eee;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
#Nav li ul li:hover{
background:#d3e4ef;
}
One LI from the #Nav UL
<li id="NavReports">Reporting
<ul>
<li id="NavReportsCourse">Course Report</li>
<li id="NavReportsPortal">Portal Report</li>
<li id="NavWorkflowsManage">Workflows</li>
</ul>
</li>
Update: There was a plugin I wasn't aware of (working with someoneelse's existing code) that was putting an invisble div over the area that was causing me problems.
Be warned that the :hover pseudo class on elements other than anchors is not supported by, guess who?
Yes, IE, as usual..
Have a look at this article, it's quite old, but it's still good, and it seems to fit your case.. Suckerfish Dropdowns on A List Apart
Related
I have a simple navigation Bar and some styling with CSS already.
The nav Bar will have a white border on along the top for the inner links.
For the two outer links I want there to be a border on the left for the left link and on the right for the right link and also curved corners but i don't know how to focus the CSS on just these two li's.
I tried to give the li an id of home but that didn't work
i'v also tried putting the curved corners code in the ul and the NavBar tags.
Here is wht I have tried
<div id="NavBar">
<ul>
<li id="Home"><strong>Home</strong></li>
<li><strong>About Us</strong></li>
<li><strong>Products</strong></li>
<li><strong>Policies</strong></li>
<li id="ContactUs"><strong>Contact Us</strong></li>
</ul>
And this is the CSS which i have tried to focus on the one li home.
#NavBar li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
border:solid 3px #FFF;
border-bottom:0px;
width:20%;
}
#NavBar li Home {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
border:solid 3px #FFF;
border-bottom:0px;
width:20%;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
Thanks for any help
Created a JSFiddle: https://jsfiddle.net/b4ejndkz/
If you're going to use width:20% and specify a border width, you'll need box-sizing:border-box;, that way it'll take into account the border size when determining total width. Otherwise it'll split off into 2 lines like it is at the moment.
Then you can set a specific corner to apply a border radius on by doing: border-radius: 5px 0 0 0; (top left, top right, bottom right, bottom left).
You could do it with id selectors https://jsfiddle.net/b4ejndkz/2/... or instead use the CSS selectors :first-child and :last-child to select your first and last elements of your list:
#NavBar li {
box-sizing:border-box;
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
border:solid 3px #FFF;
border-bottom:0px;
width:20%;
}
#NavBar li:first-child {
border-radius: 5px 0 0 0;
}
#NavBar li:last-child {
border-radius: 0 5px 0 0;
}
https://jsfiddle.net/b4ejndkz/1/
Use :first-child and :last-child.
To access only the first or last element of your list, do something like this:
ul li:first-child {
Styles for first element
}
ul li:last-child {
Styles for last element
}
With that, you can apply the needed styles to the matching links.
i've been designing an menu for my website. i've reached an issue with converting in to html/css. The idea is to have an divider line on each side of the text and on mouse over the navigation lines will disappear and show the hover image. but whatever i do the line is still there on one of the sides.
An image of my navigation menu
nav-lnie.png: is just only the line
hover.png is the whole mouseover image
does anybody have a solution or an explanation how to do this?
css looks like this:
.navigation{
width:370px;
float:left;
position: absolute;
left: 300px;
background:url(../images/nav-lnie.png) repeat-y 0 0;
padding:0 0 0 4px; font-size:14px;
font-family:Arial, Helvetica, sans-serif;
color:#fff; text-shadow:1px 1px 1px #333
}
.navigation ul li{background:url(../images/nav-lnie.png) repeat-y right 0;
margin:0 2px 0 0;
}
.navigation ul li a{
display:block;
float:left;
width:90px;
height:38px;
padding:70px 0 0 0;
text-align:center;
color:#fff;
text-decoration:none;
}
.navigation ul li a:hover{
background:url(../images/hover.png) repeat-x;
}
And html like this:
<div class="navigation">
<ul>
<li>Videos</li>
<li>Top Videos</li>
<li>Upload</li>
<li>FAQ</li>
</ul>
</div>
It's most likely due to the margin code you have here:
.navigation ul li{
background:url(../images/nav-lnie.png) repeat-y right 0;
margin:0 2px 0 0;
}
Since there's a 2px margin on the right of each menu item, the left margin won't get hidden if you mouse over the next element. If the margin isn't really needed, you can remove it and it should work fine, given that there's enough space. If it's necessary, then on the hover command, you can change the spacing on the element:
.navigation ul li a:hover{
background:url(../images/hover.png) repeat-x;
margin-left: -2px;
padding-left: 2px;
}
Of course, it's a rough hack to fix the problem. Spacing can be adjusted on both ends as well.
firefox is the only browser not showing this magic gap. i don't really understand why this gap is showing up to be honest, i'm assuming some of you have ran into this and there is a simple solution i don't really understand why this gap is showing up to be honest, i'm assuming some of you have ran into this and there is a simple solution
here is my css menu code here is my css menu code here is my css menu code
#tabs {
font: bold 11px/1.5em Verdana;
float:left;
width:800px;
height:35px;
background:#FFFFFF;
font-size:93%;
line-height:normal;
}
#tabs ul {
margin:0;
padding:7px 10px 0 10px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("images/tableft14.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("images/tabright14.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#000;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}
This is the css code thats below the menu div
#main-lower {
height: 700px;
background-color:white;
}
#specials {
background-color:#F0F0F0;
width: 870px;
height: 100%;
float: left;
border:1px solid #e2e2e2;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
i don't really understand why this gap is showing up to be honest, i'm assuming some of you have ran into this and there is a simple solution
stright from source code
<div id="tabs">
<ul>
<li><a href='http://' title=''><span>New Deals</span></a></li><li><a href='http://' title=''><span>Liquor</span></a></li><li><a href='http://' title=''><span>Beverages</span></a></li><li><a href='http://' title=''><span>General</span></a></li><li><a href='http://' title=''><span>Fountain Drinks</span></a></li>
</ul>
</div>
Quite often you get "mysterious gaps" on lists if you have new lines between the <li> elements.
<ul>
<li></li>
<li></li>
<li></li>
</ul>
Throw them on one line to see if that gets rid of your gap.
<ul><li></li><li></li><li></li></ul>
If that works then this is a duplicate of: Unwanted margin in inline-block list items
Since your gap is below your list you will want to inspect the css display for the item below it and possibly remove lines there as well. But without seeing your html this may not be the issue at all!
For an explanation on why gaps show up on inline elements see here:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Excerpt:
This isn't a "bug" (I don't think). It's just the way setting elements
on a line works. You want spaces between words that you type to be
spaces right? The spaces between these blocks are just like spaces
between words. That's not to say the spec couldn't be updated to say
that spaces between inline-block elements should be nothing, but I'm
fairly certain that is a huge can of worms that is unlikely to ever
happen.
Changed the padding top to 8px from 7px ->> padding:8px 10px 0 10px;
yea, i was pretty sure my html had nothing to do with it, and it wasn't a spacing problem cause i'm using php to call my li's
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'm trying to make a horizontal menu with CSS but i've run into a roadblock. What I'm trying to accomplish is to have the first link bblock and last link block have rounded corners using css3. I've managed to make the menu but I'm unable to achieve the desired affect.
I tried styling those individual list items but the effect doesnt show. I'm attaching my css and html for someone to look at. Any pointers would be appreciated
<ul id="nav">
<li style="-moz-border-radius-topleft: 5px;-moz-border-radius-topright: px;-moz- order-radius-bottomright: px;-moz-border-radius-bottomleft: 5px;-webkit-border-radius: 5px px px 5px; border-radius: 5px px px 5px;">Home</li>
<li>About Us</li>
<li>Services</li>
<li>Events</li>
<li>Gallery</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
#nav {
margin-left: 9px;
padding:0;
margin-top: 30px;
margin-bottom: 10px;
list-style:none;
clear:both ;
}
#nav li {
float:left;
display:block;
width:139px;
position:relative;
z-index:500;
margin:0 0;
border-left: 1px solid #5d564e;
}
#nav li a {
display:block;
padding:8px 5px 0 5px;
font-weight:500;
height:50px;
text-decoration:none;
background: #333;
color: #fff;
text-align:center;
border-left: 1px solid #000;
}
#nav li a:hover {
color:#fff;
background: #3e7e99;
text-decoration:underline;
}
#nav a.selected {color:#f00;}
Here's a jsfiddle using css3 to round the outside corners of the first and last items in the list - if I understand what you're trying to accomplish correctly.
One thing I'd add too is that moving your css from inline with the elements to a <style> section or even better a css file is preferable.
You have to set overflow:hidden; for the ul.
http://jsfiddle.net/KKPmL/1/
#nav{
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
overflow:hidden;
}
This doesn't work if the screen isn't big enough to display the navigation on one line.
Second way:
http://jsfiddle.net/KKPmL/2/
#nav li:first-child a{
border-top-left-radius:10px;
-moz-border-top-left-radius:10px;
-webkit-border-top-left-radius:10px;
border-bottom-left-radius:10px;
-moz-border-bottom-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
}
#nav li:last-child a{
border-top-right-radius:10px;
-moz-border-top-right-radius:10px;
-webkit-border-top-right-radius:10px;
border-bottom-right-radius:10px;
-moz-border-bottom-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
}
px is not a valid value, You need 0px or just 0
Also it's better to use classes first and last (or similar) on li
Look here for an example
http://jsfiddle.net/WYuNR/