Hi I am trying to keep my top navigation menu centered while left aligning the submenus that come out. What do i have to change in order to accomplish this? THanks!
<div id="container">
<ul id="nav">
<li>Home</li>
<li>Services <img src="images/tri2.gif">
<ul>
<li>Massages</li>
<li>Body Treatments</li>
<li>Facials & Waxing</li>
<li>Hair & Nails</li>
</ul>
</li>
<li>Packages <img src="images/tri2.gif">
<ul>
<li>Linky</li>
<li>Linky</li>
<li>Linky</li>
<li>Linky</li>
<li>Linky</li>
<li>Linky</li>
</ul>
</li>
<li>Specials</li>
<li>Contacts</li>
</ul>
</div>
Here is the CSS:
#container {
width: 740px;
margin: -16px auto;
padding: 0 0 0 0px;
font: 100% Helvetica, Arial sans-serif;
font-size:14px;
}
ul#nav {
line-height: 23px;
padding: 0;
}
ul#nav li {
float: left;
position: relative;
list-style: none;
background: #006666;
}
ul#nav li a {
width: 146px;
display: block;
border: 1px solid #000;
text-align: center;
text-decoration: none;
color: #fff;
}
ul#nav li:hover {background: #990000;}
ul#nav ul {
position: absolute;
padding: 0;
left: 0;
top: 23px;
visibility: hidden;
}
ul#nav li:hover ul {visibility: visible;}
ul#nav a:hover {color: yellow;}
http://jsfiddle.net/chuckie365/5LuCA/
what you need here is an additional CSS targeting that a elements:
ul#nav ul li a {
text-align:left;
}
Heres is the demo http://jsfiddle.net/5LuCA/10/
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've read all the questions concerning centering submenus. But I don't get my problem solved.
I have a simple navigation bar with 2 submenus.
You can find it here: Fiddle.
ul#nav, ul#sub1, ul#sub2 {
list-style-type: none;
}
ul#nav {
position: relative;
}
ul#nav li {
width: 125px;
text-align: center;
float: left;
margin-right: 4px;
}
ul#nav a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 5px;
color: #000;
}
ul#sub1 a, ul#sub2 a {
margin-top: 4px;
}
ul#nav li:hover > a {
background-color: #6E6E6E;
color: #FFF;
}
ul#nav li:hover a:hover {
background-color: #E2E2E2;
color: #000;
}
ul#sub1, ul#sub2 {
display: none;
position: absolute;
left: 0px;
}
ul#nav li:hover ul#sub1 {
display: block;
}
ul#sub1 li:hover ul#sub2 {
display: block;
}
<nav>
<ul id="nav">
<li>Reisen
<ul id="sub1">
<li>Europa</li>
<li>Amerika</li>
<li>Asien
<ul id="sub2">
<li>Thailand</li>
<li>Bhutan</li>
<li>China</li>
<li>Vietnam</li>
<li>Japan</li>
</ul>
</li>
<li>Afrika</li>
<li>Australien</li>
</ul>
</li>
<li>Magazin</li>
<li>Karriere
<ul id="sub1">
<li>Thema 1</li>
<li>Thema 2</li>
<li>Thema 3</li>
</ul>
</li>
<li>Kontakt</li>
</ul>
</nav>
I want the submenu centered. When I hover over "Reisen" the submenu gets the same width like the main menu.
When I hover over "Karriere", I want the submenu centered under "Karriere" and not positioned left under "Reisen".
I was thinking of a span-element to the button "Karriere" but I couldn't solve it.
Thanks for your help.
I don't really now if this is what you're looking for or not, but maybe something like this?
Note: I made a few changes to your CSS and HTML, mainly changing everything to use classes instead of IDs
JS Fiddle Example
HTML
<nav>
<ul id="nav">
<li>Reisen
<ul class="sub">
<li>Europa</li>
<li>Amerika</li>
<li>Asien
<ul class="sub-second">
<li>Thailand</li>
<li>Bhutan</li>
<li>China</li>
<li>Vietnam</li>
<li>Japan</li>
</ul>
</li>
<li>Afrika</li>
<li>Australien</li>
</ul>
</li>
<li>Magazin</li>
<li>Karriere
<ul class="sub">
<li>Thema 1</li>
<li>Thema 2</li>
<li>Thema 3</li>
</ul>
</li>
<li>Kontakt</li>
</ul>
CSS
ul#nav, ul.sub {
list-style-type: none;
}
ul#nav {
position: relative;
}
ul#nav li {
width: 125px;
text-align: center;
float: left;
margin-right: 4px;
position: relative;
}
ul#nav a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 5px;
color: #000;
}
ul.sub a {
margin-top: 4px;
}
ul#nav li:hover > a {
background-color: #6E6E6E;
color: #FFF;
}
ul#nav li:hover a:hover {
background-color: #E2E2E2;
color: #000;
}
ul.sub {
display: none;
position: absolute;
left: 0px;
padding-left: 0;
}
ul.sub-second {
display: none;
list-style: none;
left:100px;
top: 0;
position: absolute;
}
ul#nav li:hover ul.sub {
display: block;
}
ul#nav li:hover ul.sub li:hover ul.sub-second {
display:block;
}
}
I need to modify this pure css dropdown menu to be a dropup. Saw a similar post, but can't seem to modify mine. Here is the css code being used for the dropdown, which is working as expected. I tried using bottom: 100% within ul.drop li.hover, ul.drop li:hover {, but that didn't work. Any suggestions.
HTML
<body>
<ul id="nav" class="drop">
<li>Home</li>
<li>Portfolio
<ul>
<li>Horses
<ul>
<li>Horses 1
<li>Horses 2
<li>Horses 3
</ul>
</li>
<li>Dogs</li>
<li>People</li>
<li>Stills</li>
</ul>
</li>
<li>Order</li>
<li>Contact Me
</li>
</ul>
</li>
</ul>
CSS
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
width: 130px;
text-align: center;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 0px solid #ffffff;
padding: 0px 0px 0px 0px;
background: transparent;
# margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: transparent;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
width: 160px;
text-align: left;
}
li:hover a { background: transparent; }
li:hover li a:hover {
background: #3ba110;
}
ul.drop a {
display:block; color: #fff; font-family: Verdana; font-size: 14px; text-decoration: none;
}
ul.drop, ul.drop li, ul.drop ul {
list-style: none; margin: 0; padding: 0; border: 1px solid #fff; background: #1302CB; color: #fff;
}
ul.drop {
position: relative; z-index: 597; float: left;
}
ul.drop li {
float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; padding: 5px 10px;
}
ul.drop li.hover, ul.drop li:hover {
position: relative; z-index: 599; cursor: default; background: #3ba110;
}
ul.drop ul {
visibility: hidden; position: absolute; bottom: 100%; left: 0; z-index: 598; width: 160px; background: #cccccc; border: 1px solid #fff;
}
ul.drop ul li {
float: none;
}
ul.drop ul ul {
top: -2px; left: 100%;
}
ul.drop li:hover > ul {
visibility: visible
}
I didn''t use your CSS because I am not sure what is going on without HTML. Anyways I created a basic demo of what I think you are trying to accomplish.
http://jsfiddle.net/krishollenbeck/JgWEL/45/
HTML
<div class="page">
<ul>
<li class="navlink">
MENU ITEM:
<ul class="dropmenu">
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
</ul>
</li>
</ul>
</div>
CSS
.page {
width:200px;
height:100px;
position:fixed;
top:50%;
bottom:50%;
}
.dropmenu {
display:none;
border:1px solid #CCC;
background-color:#eee;
width:150px;
padding:5px;
position:absolute;
top:-70px;
}
.navlink {
background-color:#000;
padding:5px;
}
.navlink > a {color:#FFF;}
.navlink:hover > .dropmenu {display:block;}
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 have created the navigation menu listed below:
<div class="menu">
<ul>
<li>
<a href="index.php" target="_self" >Home</a>
</li>
<li>
<a href="preparation.php" target="_self" >Gallery</a>
<ul>
<li>
Storybooks
</li>
<li>
Preparation
</li>
<li>
Ceremony
</li>
<li>
Personal Shooting
</li>
<li>
First Dance
</li>
<li>
Details
</li>
</ul>
</li>
<li>
<a href="login.php" target="_self" >Customers</a>
</li>
<li>
<a href="about.php" target="_self" >About</a>
</li>
<li>
<a href="contact.php" target="_self" >Contact</a>
</li>
</ul>
</div>
The CSS for this menu at the moment is:
.menu {
margin: 0px;
padding: 0px;
font-family: "Times New Roman";
font-size: 14px;
font-weight: bold;
color: #6D6D6D;
}
.menu ul {
height: 26px;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
float: left;
padding: 0px;
}
.menu li a {
color: #6D6D6D;
display: block;
font-weight: normal;
line-height: 26px;
margin: 0px;
padding: 0px 25px;
text-align: center;
text-decoration: none;
}
.menu li a:hover, .menu ul li:hover a {
background: #ca9875 url("menu_images/hover.gif") bottom center no-repeat;
color: #6D6D6D;
text-decoration: none;
}
.menu li ul {
/*background:#333333;*/
/*background: #B32267;*/
background: white;
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
/*width: 225px;*/
width: 135px;
z-index: 200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul {
display: block;
}
.menu li li {
background: url('menu_images/sub_sep.gif') bottom left no-repeat;
display: block;
float: none;
margin: 0px;
padding: 0px;
/*width: 225px;*/
width: 135px;
}
.menu li:hover li a {
background: none;
}
.menu li ul a {
display: block;
height: 26px;
font-size: 13px;
font-style: normal;
margin: 0px;
padding: 0px 10px 0px 15px;
text-align: left;
}
.menu li ul a:hover, .menu li ul li:hover a {
background: #ca9875 url('menu_images/hover_sub.gif') center left no-repeat;
border: 0px;
color: #ffffff;
text-decoration: none;
}
.menu p {
clear: left;
}
I would like to know if there is a way to add second-level submenu to the category "Storybooks"? What i mean is that I would like to view another submenu in the right while i hover the mouse over the "Storybooks". Is this possible with css?
Appreciate any help, thanks.
I edited your code above to make it work, see http://jsfiddle.net/BVvc6/1/ for the new code.
Note: I added two menu points below Storybooks called Storybook 1 and Storybook 2. CSS is added to the bottom of the existing code (nothing altered above).
EDIT: You should clear up your CSS code a bit, e.g. use CSS selectors like > to match specific DOM levels.