I have made a dropdown menu with rollover image. The rollover image almost works (Benedict Cumberbatch is meant to turn into an otter) and a submenu to drop down (which at the moment doesn't appear).
What have I done wrong? Here is the JSfiddle
The HTML >>
<ul id="nav">
<li><img src="http://static.tumblr.com/bw1wxme/Lgsmzv53i/rollover-1.jpg">
<ul>
<li>1.2.1.1. Sub-Level-3</li>
<li>1.2.1.2. Sub-Level-3</li>
<li>1.2.1.3. Sub-Level-3</li>
<li>1.2.1.4. Sub-Level-3</li>
</ul>
</li>
The CSS >>
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
opacity:1;
}
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
}
#nav li a:hover {
color: #c00;
background-color: #fff;
}
#nav ul {
list-style-type:none;
display:none;
}
#nav .about:hover {background-image:url('http://static.tumblr.com/bw1wxme/RjMmzv543/rollover-2.jpg');}
You should add this to your css:
#nav li:hover ul {display:block;}
To show it when hover
Updated JsFiddle
Related
This question already has answers here:
Can I have an onclick effect in CSS?
(14 answers)
Closed 7 years ago.
Is it possible with pure CSS? That instead of showing a dropdown when I hover over "Test", show it when I click on "Test".
Also keep the yellow link color on "Test" when I have that dropdown open.
My current CSS
nav {
text-transform: uppercase;
text-align: center;
margin-bottom: 20px;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
text-align: left;
}
nav a {
display:block;
padding:0 20px;
transition: color .2s;
color: black;
font-size: 16px;
font-weight: 600;
line-height: 40px;
text-decoration: none;
}
nav ul ul li a { color: #FFFF64; }
nav ul ul li a:hover { color: #99A7EE; }
nav a:hover { color: #FFFF64; }
nav ul ul { display: none; position: absolute; }
nav ul li:hover > ul { display: inherit; }
nav ul ul li { background: #000; display: list-item; position: relative; }
nav ul ul li:hover { background: #333; }
http://jsfiddle.net/hn93jyvc/
You can change :hover to :active like this: http://jsfiddle.net/hn93jyvc/1/
nav ul ul li a { color: #FFFF64; }
nav ul ul li a:active { color: #99A7EE; }
nav a:active { color: #FFFF64; }
nav ul ul { display: none; position: absolute; }
nav ul li:active ul { display: inherit; }
nav ul ul li { background: #000; display: list-item; position: relative; }
nav ul ul li:active { background: #333; }
However, this will not keep state and will only work on mouse down, once you release the mouse button, the menu will disappear.
As far as I know here, you would have to use a bit of javascript to attach active to this element until another click, or the desired logic.
You can see how achieve that from this answer: https://stackoverflow.com/a/20343068/5242026
Albeit, that answer uses jQuery, you could just as well make use of Javascript click event: https://developer.mozilla.org/en/docs/Web/Events/click which makes more sense if there are no other usages for jQuery.
Like i said in my comment. This can be done using the checkbox combined with css pseudo ':checked' selector.
HTML
<ul>
<li>Home</li>
<li><label for="dd">Services</label>
<input type="checkbox" id="dd" hidden>
<ul class="dropdown">
<li>clean</li>
<li>fix</li>
<li>paint</li>
</ul>
</li>
<li>contact</li>
</ul>
CSS
ul{
background: blue;
display:block;
list-style-type: none;
text-align:center;
}
ul li{
display: inline-block;
color: white;
font-family: sans-serif;
font-weight: 800;
font-size: 20px;
padding: 10px 15px;;
position:relative;
// keep users from highlighting text if they click it on/off too fast
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
ul li:hover{
background: #f9a1c6;
color: #000;
}
ul li .dropdown{
display:none;
width: 200px;
padding:0; margin:0;
background: green;
position: absolute;
top: 45px;
left:0;
}
ul li .dropdown li{
width:100%;
display:block;
padding:10px 0px; margin:0px;
}
#dd:checked ~ .dropdown{
display:block;
}
jsfiddle
I have a dropdown menu that is working well except for one minor bug that I cannot solve.
The first dropdown menu item appears normally. However, the second dropdown menu item is shifted slightly to the right. I am guessing that the margin-right that I set to the link caused the dropdown menu to shift slightly to the right. If that is the case, what can I do to go around the problem?
It's a simple nav menu that sets the position of the dropmenu item to absolute, and is hidden by the parent element's overflow:hidden feature. On hover, the dropdown menu is brought into view with overflow:visible.
The live site is here -> nav menu
CSS
#mainMenu {
position: relative;
}
#mainMenu ul {
list-style: none;
float: right;
background-color: #FFFFFF;
}
#mainMenu ul li {
position: relative;
display: inline;
float: left;
/*padding-right: 1.5em;*/
font-size: 1.2em;
zoom:1;
overflow: hidden;
}
#mainMenu>ul>li {
line-height: 2em;
}
#mainMenu ul li:hover {
overflow: visible;
}
#mainMenu ul li a {
float: left;
text-decoration: none;
color: black;
padding: 0 1em;
}
#mainMenu>ul>li:last-child a {
padding:0.4em 1em 0.4em 1em;
border-radius:4px;
background-color: #00b200;
color: #FFFFFF;
}
#mainMenu ul li a:hover{
text-decoration: none;
color: rgb(42, 160, 239);
}
#mainMenu ul ul{
position: absolute;
top: 2em;
left: 60%;
width: 10em;
margin-left: -3em;
height: auto;
border: solid #CCC;
border-width: 0 1px 1px;
}
#mainMenu ul ul:first-child{
padding-top: 2em;
}
#mainMenu ul ul li,
#mainMenu ul ul a {
display:block;
float:none;
border:0;
box-shadow:none;
text-align:center;
font-size: 1em;
padding: 0.4em;
text-align: left;
}
#mainMenu ul ul li:first-child {
border-top:1px solid rgb(72, 147, 196);
}
#mainMenu ul ul li {
border-top: 1px solid #e9e9e9;
}
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
background:#F2F6FA;
color:#333;
}
HTML
<div id="nav-row">
<h1>
<a href="\">
Corporate Site
<span></span>
</a>
</h1>
<div id="mainMenu">
<ul>
<li>About
<ul>
<li class="company">Company Profile</li><li class="team">
The Team</li><li class="linsux">
Pricing Packages</li>
</ul></li>
<li>Services
<ul>
<li class="webDesign">Websites</li><li class="Emails">
Landing Pages</li><li class="Logos">
Logos</li>
</ul></li>
</li>
<li>Case Studies</li><li>
Blog</li><li>
Contact</li><li>
Free Web Analysis</li>
</ul>
</div>
</div>
It because you use to indent the submenu % of parent width which isn't the same. margin-left: -3em is a constant.
Use, for example:
left: -10px; /* I see the first submenu cca. 10px before the parent LI */
margin-left: 0;
Not sure why you indent by 60% and the move the submenu back using -3em.
try the following :
#mainMenu ul ul {
left: 39% !important;
}
Or
#mainMenu ul ul {
left: 0;
margin-left: 0;
}
My drop down menu is only showing one of the sub-menu drop down items. I know my css has something wrong with it, but I cannot figure it out. I have played around with various code and I cannot seem to get it. There is only one sub menu. Can someone point me in the right direction?
/** MENU */
#menu {
overflow: visible;
border-top: 1px solid #F78F1E;
color: #FFF;
background: F78F1E;
background-color: F78F1E;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
line-height: normal;
text-align: center;
}
#menu li {
display: inline-block;
background: #F78F1E;
padding: 0;
}
#menu a {
display:block;
background: #F78F1E;
padding: 10px 25px;
text-decoration: none;
text-transform: uppercase;
font-family: 'Archivo Narrow', sans-serif;
font-size: 14px;
font-weight: 700;
color: #fff;
}
#menu a:hover, #menu ul li:hover a {
text-decoration: underline;
background-color: #F78F1E;
}
#menu .active a {
background: #F78F1E;
color: #fff;
}
#menu li ul {
overflow: visible;
position: absolute;
display: none;
margin:0;
padding:0;
}
#menu li:hover ul {
display: block;
overflow: visible;
}
#menu li ul li {
overflow: hidden;
float: none;
display: block;
z-index:1000;
}
#menu li ul li a {
overflow: hidden;
width: 100px;
position: absolute;
color: #fff;
z-index:1000;
}
#menu li ul li a:hover {
background: #F78F1E;
color: #fff;
z-index:1000;
}
Here is the html:
<div id="menu">
<ul id="menu">
<li class="active">Home</li>
<li>About Us</li>
<li>
Shop
<ul>
<li>Monogrammed Tees</li>
<li>Monogrammed Hats</li>
<li>Acrylic Jewelry</li>
<li>Trendy Tees</li>
</ul>
</li>
<li>Fonts</li>
<li>Wholesale</li>
<li>Contact Us</li>
<li>cart</li>
</ul>
</div>
</div>
Remove the position: absolute from #menu li ul li a selector and it will work.
See an example
Additional notes:
You defined 2 identical IDs (id="menu"), HTML standard requires unique IDs.
You closed 2 divs (</div>), but opened only one.
So many unnecessary CSS properties which doesn't affect on your design, but can harm in the future.
If you enter some padding at the bottom of the li then the sub menu items will display. In the example below I entered padding-bottom:45px
#menu li ul li {
overflow: hidden;
float: none;
display: block;
z-index:1000;
padding-bottom:45px;}
I hope this helps!
Maybe fresh eyes can see where i am going wrong with this but i want the active menu item to have a different style...
HTML:
<div id="menu">
<ul>
<li id="active">Home</li>
<li>Products</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
And my CSS:
#menu ul {list-style-type: none;height: 40px;float: left;margin-top: 43px;margin-left:-32px;}
#menu li {
float: left;
}
#menu li #active {
background: url(../images/menu-bg-hover.png) no-repeat;
color: #ffffff;
}
#menu li a {
background: url(../images/menu-bg.png) no-repeat;
display: block;
width: 100px;
height: 40px;
text-decoration: none;
font-size: 16px;
color: white;
margin: 0 auto;
text-align: center;
padding-top: 10px;
color:#424242;
font-family: "Helvetica", Arial, sans-serif;
}
Just fix the style like this:
#menu li#active {
background: url(../images/menu-bg-hover.png) no-repeat;
color: #ffffff;
}
You had written it as #menu li #active rather than #menu li#active.
Update your CSS to #menu li#active a and place it below #menu li a. This will ensure that the styling overrides the default styles, in this case the background image and text color.
#menu li #active forces the browser to locate a child element with the id active under li.
Remove
#menu li #active {
background: url(../images/menu-bg-hover.png) no-repeat;
color: #ffffff;
}
ADD
#menu #active a{
background: url(../images/menu-bg-hover.png) no-repeat;
color: #ffffff;
}
I have a menu which is a <ul>. Inside one of the <li>s I have another <ul> to add a depth level, a sub-menu. However, when hovering the <li> to make the sub-menu appear, it's width changes to match the <ul>s. Also, the sub-menu will pull the content area down, and that's not what I want.
I want the <li> to maintain it's width when it's hovered, and the sub-menu to appear on top of the content area.
Here's the jsFiddle: http://jsfiddle.net/Cthulhu/RWjcA/ (If you hover Products, you will see it happen.)
Here's a slightly cleaned up version, and without the need for Javascript: http://jsfiddle.net/dZhQN/2/
HTML
<ul id="nav">
<li><a>Home</a></li>
<li><a>Whatever</a></li>
<li>
<a>Products</a>
<ul>
<li><a>What When How</a></li>
<li><a>Who Why</a></li>
</ul>
</li>
<li><a>Contacts</a></li>
</ul>
<div id="content"></div>
CSS
#nav, #nav ul {
list-style: none;
text-transform: uppercase;
text-align: center;
}
#nav li {
display: inline-block;
position: relative;
}
#nav li a {
display: block;
cursor: pointer;
font-size: 12px;
padding: 24px 20px 15px;
}
#nav > li > a:hover {
color: #FFF;
background: #4A6125;
}
#nav ul {
background: #000;
display: none;
position: absolute;
top: 100%;
left: 50%;
z-index: 999;
width: 150px;
margin-left: -75px;
}
#nav ul li a {
color: #FFF;
padding: 10px;
}
#nav ul li a:hover {
text-decoration: underline;
}
#nav li:hover ul {
display: block;
}
#content {
background: gold;
height: 200px;
}
You can simply give a fixed height to that Div
#main_menu .menu {
list-style: none outside none;
text-align: center;
text-transform: uppercase;
height:60px;
}
Hope this will help...