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...
Related
I am having difficulty changing the font color on my Nav bar heres the HTML.
<div id="nav" class = "menu">
<ul>
<li>Home</li>
<li>Team members
<ul class ="sub-menu">
<li>F.E.A.R Ballard</li>
<li>F.E.A.R Snakeshit</li>
<li>Redi</li>
</ul>
</li>
<li>Cool Stuff</li>
<li>Gallery
<ul class ="sub-menu">
<li>Squad</li>
<li>Dayz</li>
<li>Arma III</li>
</ul>
</li>
<li>Contact
<ul class ="sub-menu">
<li>Teamspeak</li>
<li>E-mail</li>
</ul>
</li>
<li>Facebook</li>
<li>Steam</li>
</ul>
</div><!-- links -->
And the CSS
.menu {
margin: 0px;
width: auto;
}
.menu li {
margin: 0px;
}
/*----- Top Level -----*/
.menu ul li {
display: inline-block;
position: relative;
font-size: 15px;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 100%;
border-top: none;
border-left: 1px solid green;
border-right: 1px solid green;
margin: 0px;
position: absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
}
.sub-menu li {
display: block;
font-size: 10px;
margin-top: 5px;
padding-bottom: 2px;
border-bottom: 1px solid green;
}
.sub-menu li a {
padding:10px 30px;
margin: 5px;
display:block;
}
#nav {
display: inline;
width: 100%;
height: 150px;
background-color: #879396;
}
#nav ul {
text-align: center;
padding: 0px;
background-color: #9C9898;
}
#nav li {
width: 105px;
background-color: #9C9898;
}
#nav li a {
padding: 0px;
margin: 1px;
}
#nav li a:link
{
text-decoration: none;
font-color: #000;
font-weight: bold;
}
I have tried multiple things i just cant seem to get the font color to change at the moment. Please Note i just want the font to change color, it is currently red and blue which looks horrible.
I have been out the game too long, Please advise.
Try this
#nav li a { color: green; }
Remember it's color:value in CSS and not font-color. Also adding :link to an a tag is not necessary. Just use a instead of a:link unless you really need to target links with actual hrefs
You have to provide color for the anchor tag because it don't inherit the color
check this fiddle
a {color: #fff;}
https://jsfiddle.net/Med7at/j4fxj7gw
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'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
So I know almost exactly what I need to do, but I don't know how I need to do it.
I have a drop down menu that opens when you hover over it. The child is causing the width of the parent to increase when you hover over it and that is not what I want. I know I need to set the child to position absolutely... but when I do it the child no longer shows up and it appears the hover on the parent no longer functions. Can anyone help figure out where exactly the absolute position part needs to go in? You can see I have something that I commented out.
I'd like the child to be aligned at the bottom right of the "Action" drop down.
I also have a problem where if I set the padding / margin on the parent. It extends to child. I believe I can solve that either with the absolute positioning, or after that is solved.
Here is my HTML:
<br />
<div style="width: 90%; margin:auto; background-color:#CCC; height:36px;">
<div id="actions">
<ul>
<li class="action_arrow_down">Actions
<ul>
<li>Action</li>
<li>Another Action</li>
<li>Something else here</li>
<li class = "separated_action">Separated Link</li>
</ul>
</li>
</ul>
</div>
And my CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#actions {
float: right;
display: block;
background-color: #4d90fe;
color: #FFF;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
#actions ul{
padding: 0px;
margin: 0px;
display: block;
position: relative;
overflow: hidden;
}
#actions li ul {
display: none;
background-color: #ffffff;
border: #CCC 1px solid;
/*position:absolute;
top:100%;
left:0;*/
}
#actions li ul li {
display: block;
background-color: #ffffff;
color: #000000;
overflow: hidden;
}
#actions li ul li:hover, #actions li ul li a:hover {
background-color: #eeeeee;
}
#actions li ul li a {
color: #000000;
}
#actions li{
line-height: 36px;
list-style: none;
font-size: 14px;
text-indent: 15px;
}
#actions li:not(ul li){
background-color: #4d90fe;
}
#actions li:not(ul li):hover {
background-color: #0362fd;
}
#actions li:hover > ul {
display: block;
}
#actions li a {
text-decoration: none;
color: #ffffff;
display:block;
}
#actions li ul li {
display: block;
}
.separated_action {
border-top: #CCC 1px solid;
}
/*.action_arrow_down {
background-image: url('images/action_arrow_down.png');
background-repeat: no-repeat;
background-position: right center;
}*/
The code is probably very convoluted and could use some cleaning up. I'll remove redundant parts once I get the sub menu working how I want.
Here is a jsfiddle.
You already had it. That you "loose" your submenu when you position it absolute, is because you position the parent relatively.
Solution is to remove that line:
#actions ul{
padding: 0px;
margin: 0px;
display: block;
/*position: relative; <-- delete this line */
overflow: hidden;
}
#actions li ul {
display: none;
background-color: #ffffff;
border: #CCC 1px solid;
position:absolute;
margin-left: -80px;
}
Check your updated Fiddle.
Adjust the margin-left to shift the submenu left or right. By default the left side of the parent is the left side of the child. If you'd give the child a fix width, you could use a negative margin-left to align the right sides.
Check your 2nd updated Fiddle.
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!