i'm designing a menu & sub-menu
and i am facing an issue with the alignment for the sub-menu
i would like to have the end of sub-menu to be aligned with the right-edge of "more" option, as arrow is pointed at.
if i use right: -somepx;
it would require me to have different alignment
in the chrome it would be 10px
while in the safari would be 5px
is there a cross platform solution for this.
the HTML code is:
<div id=header>
<ul id="menu">
<li>Get Closer</li>
<li>Know your team</li>
<li>More
<ul>
<li>Our Story</li>
<li>Clients</li>
<li>Testimonials</li>
<li>Pricing</li>
<li>Case Studies</li>
</ul>
</li>
<li>Get in touch</li>
</ul>
</div>
the CSS code is
#header #menu {
margin-top: 25px;
padding: 0px;
float: right;
list-style:none;
clear: right;
}
#header #menu li {
padding: 10px 15px 6px 15px;
border: 1px solid #d2d2d2;
position:relative;
float: left;
margin-left: -1px;
}
#header #menu li:hover {
background-color: #fff;
}
#header #menu li:first-child {
border-radius: 55px 0 0 55px;
padding-left: 20px;
}
#header #menu li:last-child {
border-right: 1px solid #d2d2d2;
border-radius: 0 55px 55px 0;
padding-right: 20px;
}
#header #menu a {
display:block;
font: 20px 'Klavika Rg';
text-transform: uppercase;
}
#header #menu .more:after {
content: "{";
font-family: 'WebSymbols';
font-size: 22px;
margin-left: 7px;
line-height: 0;
}
/*--- DROPDOWN ---*/
#header #menu ul{
list-style:none;
position: absolute;
right: 0px;
margin: 0;
visibility: hidden;
}
#header #menu ul li{
position: relative;
float: left;
margin-top: 0;
padding: 6px 10px 1px 10px;
margin-left: -1px;
}
#header #menu ul li:first-child {
border-radius: 15px 0 0 15px;
padding-left: 20px;
}
#header #menu ul li:last-child {
border-right: 1px solid #d2d2d2;
border-radius: 0 0 15px 0;
padding-right: 20px;
}
#header #menu ul a{
white-space:nowrap;
font: 15px 'Klavika Rg';
transition: all 0;
-moz-transition: all 0; /* Firefox 4 */
-webkit-transition: all 0; /* Safari and Chrome */
-o-transition: all 0; /* Opera */
}
#header #menu li ul{
margin-top: 6px;
width: 500px;
}
#header #menu li:hover ul{
visibility: visible;
}
Well what you have to do is changing the floot to header:
#header #menu ul li{
position: relative;
float: right; <------- Here
margin-top: 0;
padding: 6px 10px 1px 10px;
margin-left: -1px; <------- change this to -1px for prefection. (:
}
The best way to get around this and similar issues you may encounter with cross-browser validation is to use a reset stylesheet in your projects. This defaults all margins, padding, etc. to 0 for all browsers by default and eliminates most inconsistencies.
To use the reset stylesheet, simply click the link I provided, copy and paste the css from the site into a notepad.txt file and save it as reset.css. Place the file in your project folder and link to it as you would with any other .css file(assuming you use best practices).
<head>
<link rel="stylesheet" type="text/css" href="reset.css">
</head>
Note: The reset.css does set everything to default, so be sure to go through it and remove whatever you don't want set to 0 or none.
Related
I am facing an issue on IE11 on a fixed element. That's a context menu that needs to grow horizontally depending on the text inside. This works perfectly on Firefox, Chrome and Safari, but not on IE.
The problem is that on IE11 the right arrow goes down to the next line, instead of growing the line to allow all text be shown.
The following is my code:
* {
box-sizing: border-box;
}
#context-menu {
display: none;
text-align: left;
position: fixed;
z-index: 1000000000;
}
#context-menu ul {
background-color: white;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 1px 1px 3px #444;
text-align: left;
min-width: 150px;
width: auto;
}
#context-menu ul,
#context-menu ul li {
padding: 0;
margin: 0;
position: relative;
display: block;
width: auto;
color: black;
text-align: left;
background-color: #fff;
}
#context-menu ul li {
padding: 5px 10px;
cursor: pointer;
}
#context-menu ul li:hover ul {
z-index: 1;
}
#context-menu ul li:first-child {
border-radius: 3px 3px 0 0;
}
#context-menu ul li:last-child {
border-radius: 0 0 3px 3px;
}
#context-menu ul li .fa {
margin-right: 10px;
width: 15px;
vertical-align: middle;
}
#context-menu ul li.group {
cursor: default;
background-color: #dfdfdf;
font-weight: bold;
}
#context-menu ul > li:not(.group):hover {
background-color: hsla(208, 56%, 53%, 1);
color: black;
}
#context-menu ul > li.submenu::after {
font-family: FontAwesome;
content: "\f105";
margin-left: 15px;
float: right;
}
#context-menu ul> li > ul{
display: none;
}
#context-menu ul > li:hover > ul {
display: block;
position: absolute;
left: 100%;
top: 0;
}
<link href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" rel="stylesheet"/>
<div id="context-menu" style="display: block;">
<ul>
<li><span class="optionText">Long text to show the problem here on the right arrow</span></li>
<li class="submenu"><span class="optionText">Another text</span></li>
<li class="submenu"><span class="optionText">Long text to show the problem here on the right arrow</span>
<ul class="dropdownright">
<li><span class="optionText">Other</span></li>
</ul>
</li>
</ul>
</div>
If you see, if the text is longer than the min-width, it grows on all browsers except IE11, where the arrow goes down to the next line.
How can I make it grow the width automatically ?
Thank you.
Removing the "float: right" in the rule "#context-menu ul > li.submenu::after" seems to be working for me in Internet explorer 11.
I have an ul of navigation links nested in a div which is in turn nested into a 'header' div. My header div also contains a banner image, which should display in the top left corner of the website, and next to the banner I want my navigation links, which contain drop down menus when moused over.
Right now I am floating the banner to the left, and the nav links are automatically displaying next to the banner at my desktops resolution. The problem with this method is that once I resize the browser window the nav links begin to wrap around the banner and it looks terrible. Ideally I want the banner and the nav links to stay on the same line no matter the resolution of the device my site is viewed on.
Here is a jfiddle with an example of how my site displays. When I view the site at my default resolution of 1920x1080 it displays fine, but when I resize it does some funky stuff.
<!--- header div containing banner image and navigation bar --->
<div class="header">
<img id="banner" src="img/image.png" alt="Banner image displays here">
<div id="w">
<nav>
<ul id="ddmenu">
<li>About
<ul>
<li>Our Mission</li>
<li>The Staff</li>
<li>History</li>
</ul>
</li>
<li>Services
<ul>
<li>Donations</li>
<li>Volunteering</li>
<li>Housing</li>
</ul>
</li>
<li>Links
<ul>
<li>China</li>
<li>Japan</li>
<li>Canada</li>
<li>Australia</li>
<li>South America</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
/* relevent css for header, banner image, and navigation */
body {font-size: 100%; line-height: 1; max-width: 100%; font-family: 'Source Sans Pro', sans-serif; margin:0px; padding:0px;}
a:link, a:visited, a:active {color:#FFFFFF; text-decoration: none;}
a:hover {color: #C0C0C0; text-decoration: none;}
.header {width: 100%; margin:0; background-color: #FFFFFF; padding-bottom: 10px; margin-bottom: 10px;}
#banner { float: left; max-width:100%; margin: 0; padding: 0; border: none;}
#w { max-width:50%; background-color: #FFFFFF; margin: 0; padding: 0; border: none; }
#ddmenu {
max-width: 50%;
height: 68px;
margin: 0 auto;
padding-top: 2px;
padding-bottom: 2px;
background: #fff;
cursor: pointer;
outline: none;
font-weight: bold;
color: #8aa8bd;
}
#ddmenu li { display: inline-block; float: left; font-size: 1.00em;}
#ddmenu li a {
display: block;
float: left;
padding: 0 10px;
line-height: 4.9em;
font-weight: bold;
text-decoration: none;
color: #FF0000;
}
#ddmenu li:hover > a { color: #FFF; background-color: #FF0000;}
#ddmenu li:hover ul {display: block;}
/*Fills gap between top level li and nested ul so that the above mouse hover pseudoclass selecting ul works*/
#ddmenu > li:after {
content: " ";
position: absolute;
bottom: -12px;
left: 0;
width: 100%;
height: 12px;
background: transparent;
}
#ddmenu ul {
position: absolute;
top: 80px;
width: 120px;
background: #fff;
display: none;
margin: 0;
padding: 4px 4px;
list-style: none;
border-radius: 3px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
/* tooltip arrow */
#ddmenu ul:after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
left: 8px;
border-width: 0px 8px 8px 8px;
border-style: solid;
border-color: #fff transparent;
}
#ddmenu ul:before {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
left: 4px;
border-width: 0 10px 10px 10px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.1) transparent;
}
#ddmenu ul li {
display: block;
width: 100%;
font-size: 0.9em;
}
#ddmenu ul li a {
display: block;
width: 100%;
padding: 6px 2px;
line-height: 1.4em;
}
I removed a lot of your styling because there is a lot of CSS to debug, but take a look at this Fiddle. I think it shows a simpler example of the effect you are going for and you may be able to work from the CSS.
Here's a breakdown of the most important parts of the CSS:
.header ul { list-style-type: none; }: don't show bullets
.header li { display: inline-block; }: make the list items sit next to each other horizontally instead of stacking in a column like normal
.header ul ul li { display: block; }: Not for submenus, though. Still want those in a stack.
.header ul ul { display: none; }: Don't show the nested lists...
.header li:hover ul { display: block; }: ...until we hover over the parent
.header li:hover ul { position: absolute; }: binds to nearest non-statically positioned ancestor
.header li { position: relative; top: 0; left: 0; }: which is its parent thanks to this trickery. Remember to specify top and left even if you're not moving anywhere or certain browsers will ignore you.
The rest is just fluff to make it look a little better. Since you're using inline-block to take care of most of the effect, you get resizing and wrapping for free.
i'm new with css and got an code for a 2 layer css menu but i want 3 layers or 4 but its a bit confusing with ul ul li ul li hover a and so on. please can you help me? I`m trying it for 3 days but i only get the main menu and the second layer correctly styled...
/* Hauptmenü */
ul {
text-align: left;
display: inline;
text-decoration:none;
z-index:1;
padding: 0px 0px 0px 0px;
list-style: none;
}
ul a {
text-decoration:none;
color: #fff;
z-index:1;
}
ul li {
font: bold 13px/18px sans-serif;
display: inline-block;
height:23px;
position: relative;
margin: 2px 8px 0px -4px;
padding: 1px 5px 0px 5px;
color: #fff;
cursor: pointer;
z-index:1;
}
ul li:hover {
background: #db0133;
z-index:2;
}
/* Hauptmenü Ende*/
/* Untermenü 1*/
ul li ul li {
font: normal 13px/18px sans-serif;
background: none;
margin: 0px 0px 0px 0px;
display: block;
color: #000;
z-index:1;
}
ul li ul li:hover {
font: normal 13px/18px sans-serif;
background: none;
margin: 0px 0px 0px 0px;
color: #db0133;
background:#f0f0f0;
text-decoration: none;
z-index:1;
}
ul li ul {
padding: 0;
position: absolute;
top: 25px;
z-index:2;
width: 180px;
margin: -1px 0px 0px 0px;
display: none;
opacity: 1;
visibility: hidden;
background: #fff;
border: 1px solid #dcdcdc;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
z-index:2;
}
/* Untermenü 1 Ende*/
/* Untermenü 2 */
ul li ul li ul li{
padding: 0;
position: absolute;
top: 25px;
z-index:2;
width: 180px;
margin: 0px 0px 0px 175px;
display: none;
opacity: 1;
visibility: hidden;
background: #fff;
border: 1px solid #dcdcdc;
}
ul li ul li:hover ul li {
display: block;
opacity: 1;
visibility: visible;
z-index:2;
}
/*Untermenü 2 Ende */
<!-- NAVIGATION ENDE -->
Without reading the full code I am pretty sure that I know what you mean with "confusing".
when you style a ul-element, it will also affect the inner ul-elements, right?
(Same for the li-elements)
I recommend you this solution:
Classify your ul - hierarchy like this in your HTML:
<ul class="navigation-layer-0">
<li>
First layer
<ul class="navigation-layer-1">
<li>
Second layer
<ul class="navigation-layer-2">
<li>Third layer</li>
</ul>
</li>
</ul>
</li>
Now in your CSS you can do the following to always style just one layer:
.navigation-layer-0 {
/* properties for your first layer go here */
}
.navigation-layer-0 > li {
/* properties for your first layer list-elements go here */
}
.navigation-layer-1 {
/* properties for your second layer go here */
}
.navigation-layer-1 > li {
/* properties for your second layer list-elements go here */
}
/* same for third layer */
".navigation-layer-x > li" means,
Matches any li element that is a direct child of an element .navigation-layer-x.
By this you only style the list-elements of one specific list-layer.
Hope this helps!
I have a CSS based drop-down menu, which I am implementing into wordpress, however I need help in adding a image on the right side of my links when a user hoovers over a link from the menu. Below is my code and here is a similar effect I've seen done and would like to get the same effect on my menu as well.
Something like this: http://www.clydequaywharf.co.nz/
html
<div class="header">
<div class="nav-holder">
<ul id="nav">
<li><?php wp_list_pages('title_li=&depth=0&sort_column=menu_order'); ?></li>
</ul>
</div>
</div>
css
.nav-holder {
height: 32px;
width: 1010px;
float: right;
position: relative;
}
#nav {
font-family: Arial;
font-size: 12px;
float: right;
margin: 0px 30px 0 0px; padding: 0 0px 0 0px;
color: #FFF;
}
#nav li a, #nav li {
float: left;
text-transform: capitalize;
z-index: 9997;
}
#nav li {
list-style: none;
position: relative;
list-style-position: outside;
}
#nav li a:hover { background:white; color: #666; font-weight: normal; }
#nav li:hover > a { background:white; color: #666; font-weight: normal;}
#nav li a {
margin: 0px 0px 0px 15.2px;
padding: 10px 8px 8px 8px;
text-decoration: none;
color: #FFF;
text-transform: uppercase;
font-weight:normal;
letter-spacing: 0.8px;
z-index: 1006;
/* background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px); */
/* background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929)); */
}
#nav li li a:link {
background-color: white;
color: #333;
font-size: 12px;
z-index: 9995;
height:22px;
/* background: -moz-linear-gradient(top, #11032e, #2a0d65); */
/* background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65)); */
}
#nav li li a:hover {
background: white;
color: #8B7500;
z-index: 9996;
/* background: -moz-linear-gradient(top, #11032e, #2a0d65); */
/* background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65)); */
}
/* Submenu */
#nav li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
padding: 0px 1px 8px 1px; margin: 0px 0px 0px 0px;
}
#nav li:hover ul {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 15px;
width: 184px;
display: block;
z-index: 5000;
}
#nav li ul li a {
float: none;
letter-spacing: 0.0em;
background: white;
margin: 0px 0px 0px 0px;
padding: 10px 0px 0px 12px; /* Move text inside menu */
z-index: 1000;
font-size: 12px;
color: #666;
word-spacing: wrap;
text-transform: lowercase;
*margin-left: -9px;
}
#nav li ul li {
_display: inline; /* for ie6 */
background: url(../images/wordpress.png) no-repeat;
}
#nav li ul li a {
width: 158px;
display: block;
}
/* *** */
/* Sub Sub Menu */
#nav li ul li ul {
display: none;
}
#nav li ul li:hover ul {
left: 100%;
top: 0;
z-index: 1000;
}
EDIT:
I see what you're trying to do now. Wrap the contents of the in some sort of container, then you can float elements inside of it. I super-dummed-down your fiddle, but the concept still stands. You should be able to implement it in your markup.
HTML:
<ul id="nav">
<li>
<a>Past Projects</a>
<div class="menu-item-container">
<img src="http://lorempixum.com/100/100/" class="menu-image">
<ul class='children'>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul></div>
</li>
</ul>
CSS:
#nav li {
list-style: none;
position: relative;
}
#nav li div.menu-item-container {
position: absolute;
left: 0;
top:100%;
display:none;
}
#nav li:hover div.menu-item-container {
display:block;
}
#nav li img.menu-image {
float:right;
}
#nav li ul.children {
float:left;
}
Here's a fiddle: http://jsfiddle.net/thomas4g/VL3Sz/15/
Hope this helps!
I can't seem to reproduce your menu so I can't give an exact answer
For anyone stopping by, here was my original answer:
you can use the CSS pseudo class :hover (which i'm sure you're aware of) combined with a background-image, like so:
HTML:
<span class="menu-item">My Epic Menu Item</span>
CSS:
.menu-item {
padding:5px;
padding-right:25px;
}
.menu-item:hover {
background-image:url("http://lorempixum.com/20/20/");
background-position:right;
background-repeat:no-repeat;
}
Here's a fiddle if you want to play around with it: http://jsfiddle.net/thomas4g/NQQjX/4/
Please let me know if this isn't want you want, hopefully i can improve the answer.
I have a Pure CSS Dropdown menu in my banner div:
HTML:
<div id="banner">
<h1>wider design</h1>
<ul id="lang">
<li>English</li>
<li class="drop">Español</li>
<li class="drop">中文(繁體)</li>
<li class="drop">中文(简体)</li>
</ul>
</div>
CSS:
/* banner */
#banner {
border-bottom: 1px solid #DDD;
padding: 0 0 15px 0;
margin: 30px 0;
overflow: hidden;
width: 960px;
}
#lang {
padding: 9px 0 0 0;
position: absolute;
}
#lang li.drop {
display: none;
margin: 0 0 0 20px;
}
#lang:hover li.drop {
display: block;
}
When I hover #lang ul, li.drop are displayed as block (previously hidden). But here I have the following problems:
#lang floats to the left side (since it as absolute position I can't float it right).
If I position it to the right side (right: 0;) it sticks to the browser's window, and it doesn't move along the margin: 0 auto;.
If I use position: relative in #banner, and do the option 2, it works but since #banner has overflow:hidden, li.drop are not completely displayed.
I tried z-index but I'm not sure how it can works in this situation (I assigned z-index: 100; to li.drop didn't work).
Any suggestions?
try having your sub-nav as another ul inside the li
<ul id="nav">
<li><a title="" href="#><span>option one</span></a></li>
<li class="sub"><a title="" href="#"><span>option two</span></a>
<ul class="sub_nav">
<li><a title="" href="#"><span>sub one</span></a></li>
<li><a title="" href="#"><span>sub two</span></a></li>
<li><a title="" href="#"><span>sub three</span></a></li>
<li class="last_sub><a title="" href="#"><span>sub four</span></a></li>
</ul>
</li>
</ul>
and the CSS
#nav li {display: block; float: left; position: relative;}
#nav li a span {padding: 10px 25px 10px 25px; border-right: 1px solid #373737; color: #dddddd; font-size: 13px; background: #2a2a2a; float: left; display: block;}
#nav li a:hover span, #nav li .active span {color: #373737; background: #bcd22c;}
#nav .sub_nav {display: none; float: left;}
#nav .sub:hover .sub_nav {display: block; margin: 38px 0 0 0; border: none; cursor: pointer; position: absolute; z-index: 5000; width: 100px;}
#nav .sub_nav li a span {padding: 10px 10px 10px 26px; line-height: 20px; border-bottom: 1px solid #333333; font-size: 12px; height: 20px; width: 80px; cursor: pointer; margin: 0 !important; border-right: none !important;}
#nav .sub_nav li a span:hover {}
#nav .sub_nav .last_sub a span {border: none !important;}
#nav .sub_nav li span {width: 100px;}
Are you trying to move #lang to the right? If so, use this css for #lang:
#lang {
padding: 9px 0 0 50px;
list-style: none;
position: absolute;
}
Then, simply adjust "50px" to whatever you want to move the div to the left or right. Let me know if that helps or not!