Here's the site: http://breteastman.com/stormwater-basics/
Here's the dropdown css & menu CSS.
#menu-main-menu{margin-left:-30px;}
#menu-main-menu a:hover {color:pink;}
#menu-main-menu{
list-style:none;
display:inline;
text-align:center;
}
.main {
margin-top:20px;
}
#menu-main-menu li{
float:left;
}
#menu-main-menu li{
padding-left:5px;
padding-right:5px;
border-right:1px #fff solid;
}
.main{
padding-top:-1000px;
}
#menu-main-menu li a{
color:#fff;
font-size:1.2em;
text-decoration:none;
}
#navigation li a:hover{
color:#399edb;
text-decoration:none;
}
/* dropdowns */
/* Hiding the other chlidren */
ul#menu-main-menu li#menu-item-64:hover ul.sub-menu {display:block;}
ul#menu-main-menu li#menu-item-64:hover ul.sub-menu li a {background-color:#000;padding:5px;color:#fff;margin-left:-20px;}
ul#menu-main-menu li#menu-item-64:hover > ul.sub-menu li.menu-item > ul.sub-menu > * {display:none;}
.sub-menu { position: absolute;display: none;float:none;list-style:none;}
.sub-menu li { clear: both;width:225px;background-color:#000;padding:10px;border:0;text-align:left;}
.sub-menu {list-style:none;}
basically when I go to click, the drop down goes away. Please help!
Try taking out the display:none on .sub-menu:
.sub-menu { position: absolute;float:none;list-style:none;}
That should get you closer to your solution.
You have missing stylesheet properties. I see you are using superfish dropdowns. You can include their stylesheet :
<link rel="stylesheet" media="screen" href="http://users.tpg.com.au/j_birch/plugins/superfish/css/superfish.css" />
and then just adjust your website's navigation styles to what you want.
See my link : http://jsfiddle.net/nCK2P/1/ [excuse the colours used, just for the example]
Related
The main header menu of my site has an hover effect.But when i mouse over to the right of each menu item the text color is not changing but when i mouse over near the text it changes.
I have tried
.menu li:hover{background:#222;
color:white;}
.menu a:hover{
color:white;
}
but this didn't work.work. Please Help to make the hover effect.Thank you
try this,i think its compelete:
.menu li:hover{
background:#000;
}
.menu li a:link,
.menu li a:visited{
color:#000;
}
.menu li:hover a{
color:#FFF;
}
You need to change the color of the anchor's text when hovering over the li. Therefore use the following:
.menu li:hover a {
color: #fff;
}
Change it to this:
.menu li:hover{
background:#222;
color:white
}
.menu li:hover a{
color:white;
}
Try this,
.menu li:hover{
background:#222;
}
.menu li:hover a{
color:white;
}
This may be because your anchor has already css defined for itself. you need to override them.
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
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 implemented a drop down menu to my wordpress "header" template and for some reason the drop down does not show on IE6. When I go to my index page, all works fine except there are no underline on the hovers. When I switch to wordpress (under a sub directory) the drop down disappears.
I tried implementing whatever hover but it only works on the index page but not in my wordpress. Wordpress doctype is <!DOCTYPE html>
The css is as follows:
/*--- DROPDOWN ---*/
#navDrop ul {
background:#fff;
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
margin:10px auto auto auto;
left:-9999px;
}
#navDrop ul li{
padding:1px;
float:none;
background:#fff;
}
#navDrop ul a{
white-space:nowrap;
}
#navDrop li:hover ul{
left:0;}
#navDrop li:hover a{
text-decoration:none;
}
#navDrop li:hover ul a{
text-decoration:none;
background:#fff;
width: 180px;
}
#navDrop li:hover ul li a:hover{
background:#e4f2ff;
text-decoration:none;
z-index:99999;
}
#navDrop li ul li {
background:#fff;
list-style:none;
z-index:10001;
padding:1px 0 0 0;
}
Your help is appreciated... Thanks in advance.
IE6 is really, really dead. http://www.ie6countdown.com/
That said, if you need to get dropdowns to work in IE6, check these two plugins and steal some code from them and also use the default WP theme twentyten's http://wordpress.org/extend/themes/twentyten menu and doctype. The plugins use jQuery to support dropdowns in IE6.
http://wordpress.org/extend/plugins/twentyten-ie6-menus/
http://wordpress.org/extend/plugins/ie6-support-for-2010-theme/
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/