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;}
Related
I'm having problems with my navbar. The process of making one is already done, but when I hover over my nav and my subnav appears, all the text below it moves down.
How do I fix this?
Here is a code snippet which demonstrates the problem, hover over TAKKEN to see the issue:
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal>li {
float: left;
}
.horizontal li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: block;
}
.horizontal li a {
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
}
.horizontal li a:hover {
background-color: darkorange;
color: #a2becf
}
.horizontal li:first-child a {
border-left: 0;
}
.horizontal li:last-child a {
border-right: 0;
}
<nav id="mainnav">
<ul class="horizontal">
<li>Home</li>
<li>Planning</li>
<li>Takken
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Kajoo's</li>
<li>Jojoo's</li>
<li>Givers</li>
<li>Jin</li>
<li>Akabe</li>
</ul>
</li>
<li>Kleding</li>
<li>Contact
<ul>
<li>Leiding</li>
<li>Verhuur</li>
</ul>
</li>
<li>Inschrijven</li>
</ul>
</nav>
Here is some text below the nav.
Image showing the problem
Try giving a fixed width to the li elements.
Check this:
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal > li {
float: left;
width: 6rem;
}
.horizontal li ul{
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: inline-block;
}
.horizontal li a{
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color:#FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
}
.horizontal li a:hover {
background-color: darkorange;
color:#a2becf
}
.horizontal li:first-child a { border-left:0; }
.horizontal li:last-child a { border-right:0; }
<nav id="mainnav">
<ul class="horizontal">
<li>Home</li>
<li>Planning</li>
<li>Takken
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Kajoo's</li>
<li>Jojoo's</li>
<li>Givers</li>
<li>Jin</li>
<li>Akabe</li>
</ul>
</li>
<li>Kleding</li>
<li>Contact
<ul>
<li>Leiding</li>
<li>Verhuur</li>
</ul>
</li>
<li>Inschrijven</li>
</ul>
</nav>
There appear to be 2 style-related problems with your nav.
Elements are being shifted to the side when you hover over TAKKEN.
This is happening because the text KAPOENEN and KAWELLEN is longer and therefore wider than TAKKEN. The quickest fix would be to define a specific width for each of the items in your nav.
Any text below the nav moves down as soon as one of the subnavs open.
To solve this problem, you need to give your nav an absolute position, and add a placeholder div to just above it in your HTML.
Run the code snippet below to see a demonstration of both points. I've marked all my changes in the CSS using comments.
/* New code */
#placeholder {
height: 100px;
}
nav {
position: absolute;
top: 5px;
}
/* End new code */
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal>li {
float: left;
}
.horizontal li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: block;
}
.horizontal li a {
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
/* New code */
width: 80px;
}
.horizontal li a:hover {
background-color: darkorange;
color: #a2becf
}
.horizontal li:first-child a {
border-left: 0;
}
.horizontal li:last-child a {
border-right: 0;
}
<div id="placeholder"></div>
<nav id="mainnav">
<ul class="horizontal">
<li>Home</li>
<li>Planning</li>
<li>Takken
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Kajoo's</li>
<li>Jojoo's</li>
<li>Givers</li>
<li>Jin</li>
<li>Akabe</li>
</ul>
</li>
<li>Kleding</li>
<li>Contact
<ul>
<li>Leiding</li>
<li>Verhuur</li>
</ul>
</li>
<li>Inschrijven</li>
</ul>
</nav>
Here is some text under the nav.
Working on a website (inherited someone else's code) and I'm trying to make a dropdown menu. The dropdown appears correctly when I hover over the item, but as soon as I mouse down to the dropdown list items, they disappear. Can someone help me figure out what's wrong here?
#nav {
position:fixed;
top: -1em;
background: #000;
font-family: 'Abel', sans-serif;
font-size: 1.25em;
letter-spacing: 0.05em;
width:100%;
text-align:right;
padding: 1.25em;
z-index: 3;
}
#nav li {
list-style-type: none;
display: inline-block;
margin: 0em 0.25em;
color: #90918F;
}
#nav li a {
text-decoration: none;
display: inline-block;
padding: 0em 0.5em;
margin: 0;
color: #90918F;
}
#nav li a:hover {
text-decoration: none;
color: #90918F;
}
#nav li a.active {
text-decoration: none;
color: #90918F;
}
#nav li.space {
padding: 2em;
}
ul {
padding: 0.05em;
}
#nav ul {
z-index: 3;
margin-top: 0;
background: #000;
display: none;
position: absolute;
top: 72px;
right: 450px;
}
#nav ul li {
display: block;
padding: 0.75em;
text-align: left;
}
#nav li:hover > ul {
display: block;
}
#nav li > ul:hover {
position: absolute !important;
}
#nav ul li:after {
position: absolute;
left: 5%;
top: -20px;
width: 0;
height: 0;
content: '';
}
<ul id="nav">
<div id="logo">
<img src="images/logo.png" class="logo">
</div>
<li>ABOUT
<ul class="dropdown">
<li>Values</li>
<li>Our Team</li>
</ul>
</li>
<li>SERVICES</li>
<li>CLIENTS</li>
<li>STUDENTS</li>
<li>CONTACT</li>
</ul>
I'm working on this project: http://www.livingthelighterlife.com/
In the top area navigation (Home, About, Contact, Work With Me), I have a submenu drop down. The only active link is "About" - when you hover over it, the submenu appears, as does the up-arrow before it, however, I can't make the background of the up-arrow go away. It should be transparent, but it is showing up as the same pink color as the submenu.
Thanks in advance.
#top-navigation {
float: left;
padding-top: 4px;
}
#top-navigation ul {
list-style: none;
position: relative;
}
#top-navigation ul a {
display: block;
color: #ffffff;
text-decoration: none;
}
#top-navigation ul a:hover {
color: #f68364;
}
#top-navigation ul li {
position: relative;
float: left;
margin: 0px 10px;
}
#top-navigation ul li:hover {
color: #f68364;
}
#top-navigation ul ul:before {
content: '';
display: block;
margin: auto;
width: 0;
height: 0;
background: transparent !important;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #6d5d68;
}
#top-navigation ul ul {
display: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 150px;
background: #f68364;
}
#top-navigation ul ul li {
float: none;
margin: 0px;
}
#top-navigation ul ul a {
display: block;
padding: 10px;
}
#top-navigation ul ul a:hover {
background: #6d5d68;
color: #ffffff;
}
#top-navigation ul ul ul {
top: 0;
left: 100%;
}
#top-navigation ul li:hover > ul {
display: block;
}
<nav id="top-navigation">
<ul>
<li>
Home
</li>
<li>
About
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>
Contact
</li>
<li>
Work With Me
</li>
</ul>
</nav>
In reference to my comment, there may be unintended side effects if you try to maintain a background color on the <ul>. I recommend removing the background: #f68364 from #top-navigation ul ul and instead adding it to #top-navigation ul ul li. I also recommend changing border-bottom: 10px solid #6d5d68; on #top-navigation ul ul:before to border-bottom: 10px solid #f68364;
Move background: #f68364; from #top-navigation ul ul to #top-navigation ul ul a
#top-navigation ul ul a {
display: block;
padding: 10px;
background: #f68364;
}
#top-navigation {
float: left;
padding-top: 4px;
}
#top-navigation ul {
list-style: none;
position: relative;
}
#top-navigation ul a {
display: block;
color: #ffffff;
text-decoration: none;
}
#top-navigation ul a:hover {
color: #f68364;
}
#top-navigation ul li {
position: relative;
float: left;
margin: 0px 10px;
}
#top-navigation ul li:hover {
color: #f68364;
}
#top-navigation ul ul:before {
content: '';
display: block;
margin: auto;
width: 0;
height: 0;
background: transparent !important;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #6d5d68;
}
#top-navigation ul ul {
display: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 150px;
}
#top-navigation ul ul li {
float: none;
margin: 0px;
}
#top-navigation ul ul a {
display: block;
padding: 10px;
background: #f68364;
}
#top-navigation ul ul a:hover {
background: #6d5d68;
color: #ffffff;
}
#top-navigation ul ul ul {
top: 0;
left: 100%;
}
#top-navigation ul li:hover > ul {
display: block;
}
<nav id="top-navigation">
<ul>
<li>
Home
</li>
<li>
About
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>
Contact
</li>
<li>
Work With Me
</li>
</ul>
</nav>
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 am using the CSS :before pseudo-selector to create a block above the first item in a drop down list. I've been having trouble getting this block created with the pseudo-selector to be the same width as the <li> above it.
For example when you hover over "About" the pseudo block that appears beneath it should be the same width as the block that contains the word "About" and so on for the other 3 blocks.
Here's a fiddle to what I have got so far: http://jsfiddle.net/jh67P/
Here's my HTML:
<nav>
<ul class="main">
<li>About
<ul class="secondary">
<li>Learn About Us</li>
<li>Nice things to know</li>
</ul>
</li>
<li>Products
<ul class="secondary">
<li>Product One</li>
<li>Product Two</li>
</ul>
</li>
<li>Features
<ul class="secondary">
<li>Something Nice</li>
<li>Another nice thing</li>
</ul>
</li>
</ul>
</nav>
Here's the CSS:
nav .main {
font-size: 1em;
margin: 0;
padding: 0;
list-style: none;
}
.main > li {
display: block;
position: relative;
float: left;
}
.main > li a {
display: block;
text-decoration: none;
color:#FFF;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
.main > li a:hover {
background: #3b3b3b;
color:#FFF;
}
.secondary {
display:none;
list-style: none;
margin: 0;
padding: 0;
}
.main li:hover .secondary {
display: block;
position: absolute;
}
.main li:hover ul li {
float: none;
font-size: 1em;
}
.main > li:hover a { background: #3b3b3b; }
.main > li:hover li a:hover {
background: #1e7c9a;
}
.main li:hover ul:before {
content:'';
display:block;
width:100%;
height:10px;
border-bottom:10px solid #1e7c9a;
border-right: 10px solid transparent;
}
Edit: Using absolute positioning I was able to achieve the effect. Here's the updated CSS.
nav .main {
font-size: 1em;
margin: 0;
padding: 0;
list-style: none;
}
.main > li {
display: block;
position: relative;
float: left;
}
.main > li a {
display: block;
text-decoration: none;
color:#FFF;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
.main > li a:hover {
background: #3b3b3b;
color:#FFF;
}
.secondary {
display:none;
list-style: none;
margin: 0;
padding: 0;
}
.main li:hover .secondary {
display: block;
position: absolute;
top:40px;
}
.main li:hover ul li {
float: none;
font-size: 1em;
}
.main > li:hover a { background: #3b3b3b; }
.main > li:hover li a:hover {
background: #1e7c9a;
}
.main > li:hover:after {
content:'';
display:block;
width:100%;
height:10px;
border-bottom:10px solid #1e7c9a;
border-right: 10px solid transparent;
position:absolute;
top:20px;
margin-left:1px;
}
How about changing:
.main li:hover ul:before {
To:
.main > li:hover > a:after {
Is that what you are after?
jsFiddle