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;
}
Related
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;
}
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
I have a JS rollover switch, but when I click down on the link, the orange color doesn't stay, it reverts back to grey. What am I missing? Here is my code (orange is color: #f7931d):
CSS:
#content-slider {
padding-top:5px;
height: 240px;
width: 359px;
padding-left: 52px;
font-family: 'Century Gothic';
font-size: 11px;
color: #BBBDC0;
display:inline-block;
padding-bottom:25px;
overflow: hidden;
}
#content-slider-inside {
list-style: none;
height: 240px;
overflow:hidden;
overflow-y: hidden;
}
#content-slider-inside li {
height: 340px;
width: 359px;
font-family: 'Century Gothic';
font-size: 11px;
color: #BBBDC0;
display:inline-block;
padding-bottom:25px;
}
#navigation {
font-family: 'Century Gothic';
font-size: 14px;
color: #BBBDC0;
display: inline-block;
width: 940px;
height: 18px;
text-transform: uppercase;
padding-left: 45px;
padding-top: 20px;
padding-bottom:10px;
overflow: hidden;
white-space: nowrap;
text-decoration: none;
}
#navigation li {
color:#bbbdc0;
display:inline-block;
padding:5px;
text-decoration: none;
}
#navigation li a, #navigation li a:link, #navigation li a:visited {
color:#bbbdc0;
display:inline-block;
text-decoration: none;
}
#navigation li a.selected, #navigation li a.selected:link, #navigation li a.selected:visited, #navigation li a.selected:active {
color:#f7931d;
display:inline-block;
text-decoration: none;
}
#navigation li a:hover, #navigation li a:focus, #navigation li a:active, #navigation li a:focus:active {
display:inline-block;
text-decoration: none;
color:#f7931d;
}
HTML:
<ul id="navigation">
<li>overview</li>
<li>features</li>
<li>resume management</li>
<li>financials</li>
<li>expense tracking</li>
<li>search</li>
</ul>
Then the rest is basically just tags and anchors for when you click on the link.
<div id="content-slider">
<ul id="content-slider-inside">
<li id="overview">
text
</li>
<li id="features">
text
</li>
<li id="resumemanagement">
text
</li>
<li id="financials">
text
</li>
<li id="tracking">
text
</li>
<li id="search">
text
</li>
</ul>
</div>
It sounds like you are asking how to keep the menu item highlighted if its the current page. I discovered this handy little jQuery snippet on Stack Overflow a while ago, so I apologize that it is not attributed correctly. If someone recognizes this, please let me know and I will update with credits!
<script>
$(document).ready(function(){
var url = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
$('[href$="'+url+'"]').parent().addClass("nav-active"); //replace nav-active class with your preferred highlighting class-- in this case the orange color.
});
</script>
Basically it reads the browser URL, and if the end of the URL matches a menu item, it will keep it highlighted.
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!
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...