Helo!
Dropdown in IE7 displayed not correct. When I put mouse over it's appears like inline block and it's too far to the right. When I put mouse over first element in ul, second one disappears. And near each element is weird angle, which is angle of that menu which appears after I put mouse over.
any help or advice will be appreciated!
http://jsfiddle.net/an4Ng/
My code is:
nav ul {
padding:0;
margin-right:15%;
margin-left:15%;
float:left;
position:absolute;
}
nav ul li{
float:left;
position:relative;
overflow:hidden;
z-index:200!important;
padding:5px 35px;
margin-top:5px;
display:block;
}
nav ul li a{
text-decoration:none;
font-family: BebasNeueRegular, Arial,calibri;
font-size:x-large;
color:#eee;
}
nav ul li:hover{
overflow:visible;
position:static;
}
nav ul li ul{
width: auto; height: auto;
display:block;
position:absolute;
border:3px solid gray;
background-color: black;
}
nav ul li ul li a{
text-decoration:none;
font-size:large;
margin-top:15px;
}
nav ul li ul li a:hover{
text-decoration:underline;
color:#caf9ff;
}
I just threw this together but how's this?
http://jsfiddle.net/PgVQC/3/
Obviously I haven't tested it in IE7 but it's how I tend to do my dropdown menus.
You might have to throw in a bit of jquery to get the menu to display in IE7, here's an example from a site I built a few weeks ago.
http://jsfiddle.net/9L4EC/2/
Related
I want the menu subitems to appear just under the menu items. As it is now, they are a bit to right.
CSS
ul#menu {
float:left;
width:100%;
margin:0;
padding:0;
list-style-type:none;
background-color:#D60024;
}
ul#menu > li {
float:left;
display:inline;
position:relative;
padding:3px;
border:1px #8a0505 solid;
background-color:#D60024;
color:white;
}
ul#menu > li:hover {
background:#8a0505;
color:white;
}
ul#menu > li:hover ul {
opacity:1;
left:0;
height:auto;
}
ul#menu li ul {
position:absolute;
float:left;
width:100px;
height:0;
padding: 5px;
margin:0;
opacity:0;
}
ul#menu ul li {
background-color:#D60024;
border:1px #8a0505 solid;
}
ul#menu ul li:hover {
background:#8a0505;
border:1px #8a0505 solid;
color:white;
}
JSFiddle
modify in your css this: Demo
ul#menu > li:hover ul {
opacity:1;
left:-6px;
}
is not the best solution, but it does what you want
edit this
ul#menu ul li {
background-color:#D60024;
border:1px #8a0505 solid;
}
in this
ul#menu ul li {
background-color:#D60024;
border:1px #8a0505 solid;
margin-left:-6px;
}
Try this fiddle
CSS changes
ul#menu li ul {
padding: 0;
top:100%;
margin-left:-2px;
}
Working Solution: http://jsfiddle.net/avi_sagi/sTQLh/11/
In css rules for
ul#menu li ul {
padding: 6px;
}
I am assuming u gave it to align the dropdown list items to the bottom of the main menu items.
It is creating the space to the left
The right CSS rule should have been.
ul#menu li ul {
padding: 0px;
margin:4px 0 0 -1px;
}
margin-left:-1px is provided to pull the dropdown left because the 1px border of the main menu is pushing the dropdown it being the main menu list item's child element. its your wish to use it or not.
Its a bad practice to use padding instead of margin. both create spaces but their definition is different and their misuse might create problems.
secondly, these kind of problems arise commonly use Inspect Element or Firebug to see why these spaces are created.
Hope this Helps!
ul#menu li ul {
position:absolute;
float:left;
width:100px;
height:0;
padding: 5px; // to change padding: 5px 5px 5px 0;
margin:0;
opacity:0;
}
See demo your Demo edited
The following CSS code creates a NAV bar with some sample boxes within a container.
I was having problems with the Hover staying on so with some advice from here I included the extra code (second block of code down)
.dropdown>ul>li>a:hover {margin-bottom:20px;}
This extra code worked well
However it has had a side effect on my DIV boxleft in that in wont stay left - as I move the mouse across the NAV bar it moves with it......... I just want to keep DIV boxleft on the left hand side. Can you help? Many thanks.
/* Navigation Style */
.dropdown { position:relative; font-family: arial, sans-serif; width:100%; height:40px; border:1px solid #666666; font-size:14px; color:#ffffff; background:#333333; z-index:2; }
/* Basic List Styling (First/Base Level) */
.dropdown ul {padding:0; margin:0; list-style: none;}
.dropdown ul li {float:left; position:relative;}
.dropdown ul li a { border-right:1px solid #666666; padding:12px 8px 12px 8px; display:block; text-decoration:none; color:#000; text-align:center; color:#fff;}
.dropdown>ul>li>a:hover {margin-bottom:20px;}
.dropdown ul li a:hover {color:#ffffff; background:#232323;}
/* Second Level Drop Down Menu */
.dropdown ul li ul {display: none;}
.dropdown ul li:hover ul { font-size:13px; display:block; position:absolute; top:41px; min-width:150px; left:0;}
.dropdown ul li:hover ul li a {display:block; background:#000; color:#ffffff; width:170px; }
.dropdown ul li:hover ul li a:hover {background:#666666; color:#ffffff;}
/* Third Level Drop Down Menu */
.dropdown ul li:hover ul li ul {display: none;}
.dropdown ul li:hover ul li:hover ul { display:block; position:absolute; left:145px; top:0; }
#container {
overflow:hidden;
background-color:yellow;
width:1250px;
padding 10px 10px 10px 10px;
border:1px solid #666666;
margin: 0 auto;
}
.boxleft {
float:left;
background-color:blue;
margin-top:30px;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;
width:600px;
border:1px solid #666666;
z-index:1;
}
EDIT
Fiddle here : - http://jsfiddle.net/LUzNm/
Rather than address this band-aid fix, let's address the root problem!
To begin, you don't need that margin-bottom: 20px thing. That was never the cause of your initial problem. Rather, it was due to the fact that your .dropdown bar is 40px in height, but your actual dropdowns are absolutely positioned at 41px from the top. If the browser registers a mouse event while the mouse is over that 1px gap, the dropdown will close.
Now, it seems like you want that 41px so a border: 1px solid #666666 on your .dropdown bar will appear. We can do that still, but we'll just be adding that border to your hover menu.
And finally, let's get some best practices going. Padding can be useful, but padding for this use case sucks. Its far easier and more accurate to instead use line-height to achieve the height and spacing in our <a> tags rather than padding, and it allows us to do away with the extra padding-top and padding-bottom declarations on your site title! By setting line-height to 40px, we immediately match the height of the .dropdown bar at all times (and if you're using something like LESS or SASS, it becomes a great variable to reuse).
With all that being said, here's the updated fiddle: http://jsfiddle.net/2r5Mz/
One more thing that I would also recommend doing is moving the entire .dropdown container out of #container. The reason for this is #container has overflow: hidden set, which can mean chopping off your dropdown if the content isn't of sufficient height. Simply moving this .dropdown out of that div solves the issue.
i'm really new to html and css, and i thought having a project while working through tutorials would help me stay motivated while learning a lot.
i've been playing around with this menu, and it's almost there - but now there seems to be this wall and i just don't get how to get over it! i have searched for hours on several sites and am now ready to throw this thing outta the window...
here's a jsfiddle: http://jsfiddle.net/64Grv/
so what i wanted to achieve is that on hover of one submenu the whole menu changes color (instead of the hovered link now). if i hover on "more stuff" for example, all of "menupoint2, stuff, more stuff, even more stuff...." should change color.
how should i go with that? i've tried putting different classes, to no avail - i guess i put them at the wrong place. or is this possible with some kind of box?
i apologize for the messiness of my css (just a beginner messing around..), and i'd really appreciate it if somebody had concrete tips on how to do this :)
thank you very much!
CSS:
#navigation ul
{
margin:0px;
padding:0px;
position:relative;
text-align:center;
}
#navigation ul li
{
display:inline;
float:right;
line-height:20px;
list-style:none;
margin-right:3%;
margin-top:5%;
position:relative;
}
#navigation li a
{
display:block;
font-family: "Helvetica", "Arial", sans-serif;
font-size:1em;
color:#04B4AE;
text-decoration:none;
}
#navigation li a:hover
{
color:#08298A;
text-decoration:none;
}
#navigation li ul
{
font-size:0.8em;
background-color:transparent;
display:block;
margin:0px;
padding:0px;
top:0.5em;
}
#navigation li:hover ul
{
color:#04B4AE;
}
#navigation li li
{
vertical-align:middle;
list-style:none;
display:list-item;
margin:auto;
float:none;
}
#navigation li li a
{
color:#04B4AE;
text-decoration:none;
}
#navigation li li a:hover
{
color:#08298A;
text-decoration:none;
}
you need to set :hover on li :
http://jsfiddle.net/64Grv/1/
li:hover a {color:red}
Try
li:hover a
{
color:yellow;
}
Updated fiddle link is here just changed below
Replace below code
#navigation li a:hover
color:#08298A;
text-decoration:none;
}
with
#navigation li:hover a {
color:#08298A;
text-decoration:none;
}
I have a pure CSS implementation of horizontal menus that works fine on browsers on a computer. The website is www.intercessionsp.org. However, on touch devices (specifically, I have tried Safari on iPad and iPhone), the menus do not work. Touching them causes no response at all, if there is a submenu (the Home menu item works fine). I have tried to implement two solutions:
1. using onclick="return true", based on terraling's solution in "iPad/iPhone Touch Event on Hover CSS" question here on stackoverflow.
2. adding #ios ul { display: none; } and #ios li:hover ul { display: block; } based on a post by Philip Renich on elfboy.com called "Making CSS Drop Down Menus Work on the iPhone".
Neither worked.
Here is the relevant part of my css file:
/* horizontal menus */
#nav, .nav, #nav .nav li {
margin:0px;
padding:0px;
}
#nav li {
float:left;
display:inline;
cursor:pointer;
list-style:none;
padding:10px 30px 10px 30px;
border:1px #000 solid;
position:relative;
background: #990000;
}
#nav li ul.first {
left:-1px;
top:100%;
}
li, li a {
color:#fff;
text-decoration:none;
}
#nav .nav li {
width:100%;
text-indent:10px;
line-height:30px;
margin-right:10px;
border-top:1px #000 solid;
border-bottom:1px #000 solid;
border-left:none;
border-right:none;
background:#990000;
onclick="return true"
}
#nav li a {
display:block;
width:inherit;
height:inherit;
}
ul.nav {
display:none;
}
#nav li:hover > a, #nav li:hover {
color:#990000;
background:#fff;
}
li:hover > .nav {
display:block;
position:absolute;
width:200px;
top:-2px;
left:30%;
z-index:1000;
border:1px #000 solid;
}
li:hover {
position:relative;
z-index:2000;
}
#basic li {
color:#000;
}
Since I already have display:block in my li:hover > .nav, I tried adding it to #nav li:hover > a, #nav li:hover (without expecting this one to work) and to li:hover, but neither worked. I should add that I looked at Renich's comment about setting a width value, but since I already had width values set, this didn't appear to be useful.
I would like to stay with a pure CSS implementation.
Your menu relies on the css selector :hover in order to show the list items. In order for those to show on a mobile device like an iphone the user must be able to click. You can try wrapping the text on the first level on your menu with <a> tags. For example: About Us
View this on a mobile device:
http://jsfiddle.net/tlaverdure/L42AE/
I have a very strange image hover problem in Google Chrome.
When I hover the mouse over the menu, I get my background image in Mozilla and IE, but not in Chrome.
I used the following CSS script for the menu item.
.content_resize { padding-right:0; padding-top:16px; width:930px;background-color:#fff; }
.content .mainbar { float:left; width:630px;}
.content .newstick { float:center; width:650px;}
.content .mainbar img { margin-bottom:24px; padding:4px; border:1px solid #b7b7b7; background-color:#fff;}
.content .mainbar img.fl { float:left; margin-right:12px;}
.content .mainbar .article, .content .sidebar .gadget { margin:0; padding:0 0 16px 0;}
.content .sidebar { float:right; width:276px;}
ul.sb_menu, ul.ex_menu { margin:0; padding:0; list-style:none; color:#959595;}
ul.sb_menu li, ul.ex_menu li { margin:0; }
ul.sb_menu li { padding:4px 0; border-bottom:1px solid #e3e3e3; width:220px;}
ul.ex_menu li { padding:4px 0 8px;}
ul.sb_menu li a, ul.ex_menu li a { color:#5f5f5f; text-decoration:none; margin-left:-16px; padding-left:5px;}
ul.sb_menu li a:hover, ul.ex_menu li a:hover { color:#FFFFFF; font-weight:bold; display:block; width:200px ; height:25px; background:url(images/menu_bg.gif) no-repeat left top;}
ul.sb_menu li a:hover { text-decoration:underline;}
ul.ex_menu li a:hover { text-decoration:none;}
.content .scroll { float:left; background:url(images/scroll_bg.gif) no-repeat left top; display:block; margin-left:35px; height:200px; width:180px; OVERFLOW: hidden;background-color:transparent;}
It's working fine with Internet Explorer and Mozilla. While Its not showing up the background image for the menu on hovering in chrome. Can anyone Help me please?
Not too late for me to answer, I hope?
This is happening because display:block; is being triggered on hover, which WebKit doesn't seem to like. It should work if you move the display:block; property from ul.sb_menu li a:hover, ul.ex_menu li a:hover to ul.sb_menu li a, ul.ex_menu li a
While you're at it, it would probably make sense to move width:200px; and height:25px; to the same place as well. This shouldn't affect how it appears in IE, Firefox or Opera, by the way.
You are simply having the same issue as on this thread: chrome does not render gif background image
GIF images are not render correctly by chrome if they are applied on hover (ie. img:hover).
So you have a couple of options:
If your images are not animated: change the format of your images
If your images are animated: use a work around, see answers of question chrome does not render gif background image