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!
Related
I've coded a css dropdown menu and cant seem to get the name "LOGOS" to stay within the green box when I hover over the word "Illustration". I've made the word 5em so I can see it. Cant get it to stay in the box...no control of it's position. Can you help?
Thanks,
T.
<div id="nav-bar-sm-cont">
<ul id="sm-nav">
<li id="home">HOME</li>
<li id="about">PROFILE</li>
<li id="illustration">ILLUSTRATION
<ul>
<li id="logos">LOGOS</li>
</ul>
</li>
<li id="billboards">BILLBOARDS</li>
<li id="six-mo">6 MO BREAKFAST</li>
<li id="cal">ARTSHOW</li>
<li id="church">CHURCH</li>
<li id="contact">CONTACT</li>
<li id="cat-ill">CAT ILLUSTRATION</li>
<li id="contact-cat">CONTACT CAT</li>
</ul>
</div>
<!--end nav bar sm container -->
/* START small NAV bar **************************/
#nav-bar-sm-cont { position: absolute;
width: 1000px;
height: 100px;
}
#sm-nav li { position: relative;
top: 30px;
left: 35px;
font-size: .6em;
line-height: 250%;
letter-spacing: 0.3em;
list-style-type: none;
float: left;
}
#sm-nav a:link{ text-decoration:none;
color:silver;
background-color:transparent;
padding: 5px 5px;
}
#sm-nav a:visited {text-decoration:none;
color: #9781B7;
padding: 5px 5px;
background-color: transparent;
}
#sm-nav a:hover {text-decoration:none;
color: #fff;
background-color:#a7d6d5;
padding: 5px 5px;
}
#sm-nav a:active {text-decoration:none;
color:#fff;
background-color: green;
padding: 5px 5px;
}
/*start drop down************************************/
#sm-nav li ul { position:relative;
list-style-type: none;
display: none;
}
#sm-nav li:hover ul { position: absolute;
background: green;
padding: 5px 5px;
display:block;
font-size: 5em;
width: 103px;
height: 10px;
}
/*end drop down*****************************************/
/* END small NAV BAR *****************************/
The problem is that your CSS for the li is affecting both the parent li and the child. To fix that just change:
#sm-nav li {
to
#sm-nav > li {
Now that CSS will only affect the parent li and you're free to adjust the CSS for the child however you want like this:
#sm-nav li:hover ul li { }
JSFiddle
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.
Problem: Why when i go with the mouse over "About" the sub-menu appears but if i try to go into any of it items it disappears?
Part of my style.css:
#menu {
padding: 0 45px 0 45px;
position: relative;
background: #209D9D url(images/img02.gif) repeat-x top left;
margin: 0 0 0 0;
height: 60px;
line-height: 60px;
width: 890px;
border-top: solid 1px #5AD7D7;
text-shadow: 0 1px 1px #007D7D;
}
#menu a {
text-decoration: none;
color: #ffffff;
font-size: 1.25em;
letter-spacing: -1px;
}
#menu a:hover{
color: #136F6F;
}
#menu ul {
list-style: none;
text-align: center;
}
#menu ul li {
padding: 0 20px 0 20px;
display: inline;
position: relative;
list-style: none;
}
#menu ul li.first {
padding-left: 0;
}
#menu ul li:hover ul{
visibility:visible;
}
#menu ul ul{
position: absolute;
top: 35px;
visibility: hidden;
}
#menu ul ul li{
position: relative;
float: left;
margin: 0;
padding:0;
}
#menu ul ul li a{
display: block;
text-decoration:none;
text-align: center;
height: 55px;
line-height: 55px;
width: 200px;
background-color: #209D9D;
color: white;
}
#wrapper {
position: relative;
width: 980px;
margin: 75px auto 0 auto;
background: #FFFFFF;
}
Part of my index.html:
<div id="wrapper">
<div id="menu">
<ul>
<li class="first current_page_item">Homepage</li>
<li>Blog</li>
<li>Papers</li>
<li>Projects</li>
<li>About
<ul>
<li>Me</li>
<li>Curriculum Vitae</li>
<li>Contact Me</li>
</ul>
</li>
<!-- <li class="last">Contact</li> -->
</ul>
<br class="clearfix" />
</div>
There is a gap between your menu and submenu, when your cursor goes over this gap, the submenu disappears, try changing "top: 35px;" in "#menu ul ul" to "top: 20px;"
Change padding of #menu ul li to padding: 20px;
Play around the values.
Live demo
EDIT
Instead of changing the li's padding, I had added below css:
#menu ul li a {
padding:20px 0;
}
#menu ul ul li a {
padding: 0;
}
Demo Here
Try it.
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.
I have been building a CSS drop down menu and I have a slight snag and wondered if anyone could help me fix this. I have a menu that has this HTML
<div id="menu">
<ul>
<li><a class="active" href="#">Home</a>
<ul class="sub-menu">
<li>This is sub</li>
<li>sub menu item</li>
<li>This is a long sub menu item</li>
</ul>
</li>
<li>Location</li>
<li>another link</li>
</ul>
</div>
Currently when I hover over the main <li> 'Home' it's width expands a lot, I think to accommodate the sub-class menus that I have. How can I stop this from occurring? To achieve something like:
|Home| // Nice short main tab
|A sub menu link |
|Another sub menu link|
As opposed to this that is currently happening (forgive the crudeness of my diagram)
|Home....................| // really long messing up everything tab
|A sub menu link |
|Another sub menu link|
This is my CSS code for the menu:
#menu ul {
margin: 0;
list-style: none;
padding: 0 0 0 20px;
position: relative;
z-index: 40;
}
#menu ul li {
float: left;
padding: 10px 10px 13px 0;
position: relative;
z-index: 50;
}
#menu li a {
text-decoration: none;
font-family: Verdana, Geneva, sans-serif;
I have basically the same markup so the following code should work well for what you need.
I left all of the color and image info in case you needed help there too.
#menu {
background: none repeat scroll 0 0 #333333;
border: 0 none;
font: bold 14px "Lucida Sans Unicode","Bitstream Vera Sans","Trebuchet Unicode MS","Lucida Grande",Verdana,Helvetica,sans-serif;
margin: 0;
padding: 0;
width: 100%;
}
#menu ul {
background: none repeat scroll 0 0 #333333;
height: 35px;
list-style: none outside none;
margin: 0 0 3px;
padding: 0;
width: 100%;
}
#menu li {
float: left;
padding: 0;
}
#menu li a {
background: no-repeat scroll right bottom #333333;
color: #CCCCCC;
display: block;
font-weight: normal;
line-height: 35px;
margin: 0;
padding: 0 10px;
text-align: center;
text-decoration: none;
}
#menu li a:hover, #menu ul li:hover a {
background: no-repeat scroll center bottom #2580A2;
color: #FFFFFF;
text-decoration: none;
}
#menu li ul {
background: none repeat scroll 0 0 #333333;
border: 0 none;
display: none;
height: auto;
margin: 0;
padding: 0;
position: absolute;
width: 225px;
z-index: 200;
}
#menu li:hover ul {
display: block;
}
#menu li li {
display: block;
float: none;
margin: 0;
padding: 0;
width: 225px;
}
#menu li:hover li a {
background: none repeat scroll 0 0 transparent;
}
#menu li ul a {
display: block;
font-size: 12px;
font-style: normal;
height: 35px;
margin: 0;
padding: 0 10px 0 15px;
text-align: left;
}
#menu li ul a:hover, #menu li ul li:hover a {
background: no-repeat scroll left center #2580A2;
border: 0 none;
color: #FFFFFF;
text-decoration: none;
}
The markup is weird man.
First of all, try to structure it a little better than having the <a> for the home link in the same <li> as another <ul>. Can this link be in a separate <li>?
Also, don't wrap the menu in a <div>. Just apply the styling directly to the parent <ul>.