I have a really small problem I want to fix, but I don't know how. So I have a menu in which I added an icon with the "Elegant Icons" font. I want it to show only on elements li which have childen lis, but it appears on first children on first li element. Here is what I mean Link.
Here is my CSS:
.menu-new li:first-child{
border-left:1px solid black;
}
.menu-new li > a:after{
content: "\37";
font-family: "ElegantIcons";
}
.menu-new li > a:only-child:after{
content:"";
}
Add > to denote immediate child of .menu-new
.menu-new > li:first-child{
border-left:1px solid black;
}
.menu-new > li > a:after{
content: "\37";
font-family: "ElegantIcons";
}
.menu-new > li > a:only-child:after{
content:"";
}
Related
Having a devil of a time getting my CSS dropdown menu to center. I know this is question has been asked before, but their solutions don't seem to be working. I've tried the margin:auto trick, changed the float:left to display:inline-block, and tried to put it in an invisible, centered superlayer. Nothing helped. :) What am I missing?
.nav ul ul {
display:none;
}
.nav ul li:hover > ul {
display:block;
}
.nav ul {
display:inline-block;
position: absolute;
padding: 0;
margin-left:auto;
margin-right:auto;
margin-top:0;
margin-bottom:0;
background:#fff8e0;
font-family: hofstad;
font-size:30px;
color:#6f0018;
padding-top:20;
padding-bottom:20;
list-style-type: none;
}
.nav ul li {
float:left;
margin-left:50;
margin-right:50;}
.nav ul li a {
;} !--main links, if they are links--!
.nav ul li:hover {
color:#980122;
}
.nav ul li:hover > ul {
margin:0;
padding-top:20;
padding-bottom:0;
padding-left:0;
padding-right:0;
}
.nav ul li:hover > ul li {
float:none;
margin-left:0;
margin-right:0;
padding-top:0;
padding-bottom:5;
padding-left:5;
padding-right:5;
}
.nav ul li:hover > ul li a {
color:#980122;
}
.nav ul li:hover > ul li a:hover {
color:#6f0018;
}
Its a little hard without seeing it in action to debug.
But it looks initially like your UL is positioned as "absolute" as soon as you do that it is pulled out of the main document flow.
Try playing around with which parent element has a "relative" position for it to anchor to.
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/
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/
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]