i am styling a navigation menu using the following css. I have found that it works perfectly in chrome but absolutely none of the css is beign applied in firefox or IE.
Is there something obvious that i havent done or have done here?
<style type="text/css">
#ddm {
margin: 0;
padding: 0;
}
#ddm li {
float: left;
list-style: none;
font: 8pt Tahoma, Geneva, sans-serif;
}
#ddm li a {
display: block;
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
white-space: nowrap;
color:Red;
border: none;
}
#ddm li a:hover {
color:White;
background-color:#444444;
}
#ddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
}
#ddm li ul li {
float: none;
display: inline
}
#ddm li ul li a { width: auto; }
#ddm li ul li a:hover { }
</style>
<ul id="ddm">
<li>
<ul>
<li>test 1</li>
<li>test 2</li>
</ul>
</li>
</ul>
Both of you are correct. There must be something else outside of the markup that is interfering somehow with IE and FF. Sorry for any time wasting.
The last line display: inline is missing a ; at the end which is causing your problem
Related
This question already has answers here:
CSS overflow:hidden with floats
(5 answers)
Closed 6 years ago.
I already know about overflow:hidden that It hide text when text can't be filled in border. but I don't know why the following coding need it.
This code creates navigation bar but if I erase overflow:hidden, It doesn't work. I want to know about this happening. hidden works for what?
please help.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
That is because you are not clearing float left.Please remove overflow:hidden; from code and add
ul:after{
Content:"";
display:block;
clear:both;
}
This will work properly.
its about float left when child has this property then parent leave child's height property so then ul tag invisible becouse that have no height
so us like this
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
Hope this helps you
THANKS
Actually it works well if you give ul a height.
Here the overflow is well explained: W3C
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
height:46px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
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 menu that works really well but the submenu items overlap when there are too long. I tried setting the line-height to 24px which made the text ok but then the hover background color stuff was too small. Here's the code:
.nav ul {
list-style: none;
background-color: #5FD6D6; /*nav background */
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: black; /* font color */
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #BFEFEF; /* hover color */
}
.nav a.active {
background-color: #ED1C24; /*selected color */
color: white;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: 1em;
}
#media screen and (min-width: 650px) {
.nav li {
width: 150px;
border-bottom: none;
height: 100px;
line-height: 100px;
font-size: 2em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<div class="nav">
<ul>
<li>Home
</li>
<li>Tutorials
<ul>
<li>Tutorial #1##
</li>
<li>Tutorial #2
</li>
<li>Tutorial #3
</li>
</ul>
</li>
<li><a class="active" href="#">About</a>
</li>
<li>Newsletter
<ul>
<li>News #1
</li>
<li>News #2###
</li>
<li>News #3
</li>
</ul>
</li>
</ul>
</div>
There are already some working answers, but if you'd like the child navigation items to increase in width as needed (as opposed to increase in height), I'd suggest removing an explicit width from .nav li (inside the media query), and adding it instead as a min-width to .nav > ul > li (also inside the media query).
(On a personal level, I find it much more readable if navigation items increase in width as needed and stick to a single line, instead of breaking to a new line and increasing in height.)
So those two declaration blocks would go from:
#media screen and (min-width: 650px) {
.nav li {
width: 150px;
border-bottom: none;
height: 100px;
line-height: 100px;
font-size: 2em;
display: inline-block;
margin-right: -4px;
}
.nav > ul > li {
text-align: center;
}
}
To:
#media screen and (min-width: 650px) {
.nav li {
border-bottom: none;
height: 100px;
line-height: 100px;
font-size: 2em;
display: inline-block;
}
.nav > ul > li {
text-align: center;
min-width: 150px; /* new */
margin-right: -4px; /* moved */
}
}
Note that I also moved the negative margin-right between the declaration blocks, as this seemed to be causing some issues with the child navigation items' backgrounds. Here's a JSFiddle to demonstrate the code in action.
Hope this helps! Let me know if you have any questions.
You can remove the "height", that worked for me:
.nav li {
width: 150px;
border-bottom: none;
/*height: 100px;*/
line-height: 100px;
font-size: 2em;
display: inline-block;
margin-right: -4px;
}
I don't like setting line-height that big except for special cases.
In your case, instead of having that big I believe it's more appropriate to use padding.
So to do that:
First remove line-height and height on .nav li, then it will now look like this.
.nav li {
width: 150px;
border-bottom: none;
font-size: 2em;
display: inline-block;
margin-right: -4px;
}
Then in your .nav a add a padding :
.nav a {
text-decoration: none;
color: black;
display: block;
transition: .3s background-color;
padding: 1em 0;
}
This way, your list are more flexible than having a fixed height.
Working example
.nav ul {
list-style: none;
background-color: #5FD6D6; /*nav background */
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: black; /* font color */
display: block;
transition: .3s background-color;
padding: 1em 0;
}
.nav a:hover {
background-color: #BFEFEF; /* hover color */
}
.nav a.active {
background-color: #ED1C24; /*selected color */
color: white;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: 1em;
}
#media screen and (min-width: 650px) {
.nav li {
width: 150px;
border-bottom: none;
font-size: 2em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<div class="nav">
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>Tutorial #1##</li>
<li>Tutorial #2</li>
<li>Tutorial #3</li>
</ul>
</li>
<li><a class="active" href="#">About</a></li>
<li>Newsletter
<ul>
<li>News #1</li>
<li>News #2###</li>
<li>News #3</li>
</ul>
</li>
</ul>
</div>
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...