I have tried to find an answer to my question, and while there are similar issues, nothing jumped out as me as a fix for my problem.
I am adding a Sub menu using CSS and for some reason the horizontal sub menu will only show up outside of the body. You can see an example of what happens here http://jsfiddle.net/sxP94/22/.
I need to get the sub menu to appear right under Portfolio on the menu. If anybody could help me figure out why this is happening, I would be ever so grateful.
Here is the code:
CSS
body {
margin:0;
padding:0;
width:100%;
color:#929292;
font:normal 12px/1.5em "Liberation sans", Arial, Helvetica, sans-serif;
}
html, .main {
padding:0;
margin:0;
}
.main {
background:#f8f8f8;
}
a {
color:#0087c7;
text-decoration:underline;
}
.header, .content, .menu_nav, .fbg, .footer, form, ol, ol li, ul, .content .mainbar, .content .sidebar {
margin:0;
padding:0;
}
.header {
}
.header_resize {
margin:0 auto;
padding:0;
width:960px;
}
h1 a, h1 a:hover {
color:#000;
text-decoration:none;
}
h1 span {
}
.menu_nav {
margin:0 auto;
padding:70px 0 0;
height:15px;
float:right;
}
.menu_nav ul {
list-style:none;
padding:0 0 0 1px;
height:15px;
float:left;
background:url(../images/menu_split.gif) no-repeat left center;
}
.menu_nav ul li:first-child {
margin:0;
}
.menu_nav ul li {
margin:0;
padding:0 20px;
float:left;
background:url(../images/menu_split.gif) no-repeat right center;
}
.menu_nav ul li a {
display:block;
margin:0;
padding:0;
font-size:15px;
line-height:18px;
font-weight:bold;
color:#c4c4c4;
text-decoration:none;
text-transform:uppercase;
}
.menu_nav ul li.active a, .menu_nav ul li a:hover {
text-decoration:none;
color:#000;
}
.menu_nav > ul > li > ul {
height:1000px;
left:-99999px;
overflow:visible;
position:absolute;
top:37px;
width:115px;
float: left;
}
.menu_nav > ul > li:hover ul {
left:0;
top:37px;
}
.menu_nav > ul > li > ul > li {
background:none #343434;
border:1px solid #4f4f4f;
float:none;
height:29px;
margin:-1px 0 0;
padding:0 12px;
position:relative;
width:auto;
z-index:1000;
}
.menu_nav ul li ul li a {
color:#ffffff!important;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
line-height:28px;
text-transform:none;
}
.menu_nav ul li ul li.active a, .menu_nav ul li ul li a:hover {
color:#fff!important;
}
HTML
<body>
<div class="main">
<div class="header">
<div class="header_resize">
<div class="menu_nav">
<ul>
<li class="active"><span>Home</span></li>
<li><span>About</span></li>
<li><span>Services</span></li>
<li><span>Portfolio</span>
<ul>
<li>Boudoir</li>
<li>Babies</li>
<li>Engagement</li>
<li>Wedding</li>
<li>Lifestyle</li>
<li>Family</li>
<li>Grads</li>
</ul>
</li>
<li><span>Blog</span></li>
<li><span>Contact</span></li>
</ul>
</div>
</div>
</div>
</div>
Anytime I change any of the left numbers, the sub menu stops showing up completely. Doesn't even show up on the outside of the body when I hover over the menu. So I can't figure out how to move it around because anything I try makes it disappear completely. Thank you for taking the time to read this and thank you in advance for any help you are able to offer.
Give position: relative to parent of the sub menu. The sub menu is given position:absolute and hence shows up outside.
.menu_nav ul li {
position: relative;
}
Related
I have a navigation bar made from an unordered list in HTML. Within my list I have another nested list which acts (or is supposed to act) as a dropdown-menu. I will let the markup speak for itself:
<ul>
<li>Produkter
<ul class="dropdowncontent">
<li>Moderkort</li>
<li>Processorer</li>
<li>Hårddiskar</li>
<li>Grafikkort</li>
</ul>
</li>
<li>Butiker</li>
<li>Kontakt</li>
<li>Vanliga frågor</li>
</ul>
First of all, I am wondering if I should be using a class (which I am currently doing), or if I should use an ID instead?
Secondly, I have issues with giving my dropdown-menu a width which I wish to be of the same width of the list-item "Produkter". Here is my CSS:
body {
margin:0;
font-family:Arial, Helvetica, sans-serif;
}
ul {
list-style-type:none;
margin:0;
padding:0;
width:100%;
overflow:hidden;
background-color:black;
}
ul li {
float:left;
}
ul li a {
display:block;
color:white;
text-decoration:none;
text-align:center;
padding:14px 16px;
-webkit-transition-duration:0.4s;
transition-duration:0.4s;
}
ul li a:hover {
background-color:#333;
}
ul li ul.dropdowncontent {
}
Notice that the CSS-selector of the dropdown-menu (a nested unordered list) is empty. This is because I simply don't know how to style it.
Help is much appreciated. Sincerely, Max.
I managed to solve my own question, but I would still like some input. This is what I did:
First, I gave my list-items a fixed width of 150px.
ul li {
float:left;
width:150px;
}
Then, I positioned my dropdown-menu as absolute (I don't know why this works, if someone please could explain this to me I would be very happy). Then, I gave the dropdown-menu the same width as my list-items. I also displayed the dropdown-menu as a block-level element. Here it is:
ul li ul.dropdowncontent {
position:absolute;
display:block;
width:150px;
font-size:80%;
}
Thank you all for your answers.
Try following CSS code, No need change your html structure.
body {
margin:0;
font-family:Arial, Helvetica, sans-serif;
}
ul {
list-style-type:none;
margin:0;
padding:0;
width:100%;
background-color:black;
min-height: 46px;
}
ul li {
float:left;
position: relative;
}
ul li a {
display:block;
color:white;
text-decoration:none;
text-align:center;
padding:14px 16px;
-webkit-transition-duration:0.4s;
transition-duration:0.4s;
}
ul li a:hover,
ul li:hover > a {
background-color:#333;
}
ul li ul.dropdowncontent {
position: absolute;
top: 100%;
left: 0;
width: 100%;
display: none;
background-color: #333;
min-width: 150px; // Added otherwise only with parent width dose not possible to show entire link text.
}
ul li:hover > ul.dropdowncontent {
display: block;
}
I have this CSS for a vertical menu:
#charset "UTF-8";
/* CSS Document */
#vertical_menu {
float:left;
padding-left:10px;
}
#vertical_menu > ul > li {
display:inline-block;
width:250px;
}
#vertical_menu > li {
display:inline-block;
list-style:none;
margin-left:-20px;
}
#vertical_menu li a {
display:block;
padding-bottom:10px;
margin-top:15px;
border-bottom:4px solid #000000;
color: #000000;
text-decoration:none;
text-align:center;
}
#vertical_menu li a:hover {
border-color:#666666;
color:#666666
}
ul {
padding:0px;
margin:0px;
}
how can i make the <li> elements without a a href link different like a menu title so the links below are like a sub menu
here is a fiddle with the full code:http://jsfiddle.net/32hqL/
for example, where it says Link Title, needs to be different like a proper title. maybe centered or something
you can wrap the title in a span and then style the span:
<li><span>LINK TITLE</span></li>
#vertical_menu li span {}
http://jsfiddle.net/peteng/32hqL/4/
http://jsfiddle.net/32hqL/1/
You do it by using:
li:not(a) {
color: red;
}
You can set some style on #vertical_menu li, which will be override with #vertical_menu li a
Demo
try this
http://jsfiddle.net/32hqL/11/
CSS
#charset "UTF-8";
/* CSS Document */
#vertical_menu {
float:left;
padding-left:10px;
}
#vertical_menu > ul > li {
display:inline-block;
width:250px;
}
#vertical_menu > li {
display:inline-block;
list-style:none;
margin-left:-20px;
}
#vertical_menu li a {
display:block;
padding-bottom:10px;
margin-top:15px;
border-bottom:4px solid #000000;
color: #000000;
text-decoration:none;
text-align:center;
font-weight:100;
}
#vertical_menu li a:hover {
border-color:#666666;
color:#666666
}
ul {
padding:0px;
margin:0px;
}
li:not(a) {
color: red;
text-align:center;
font-weight:600;
}
You can define set of styles for link title in separate class and give that class to link title li's. Have a look at working demo here: http://jsfiddle.net/32hqL/9/
.title{
text-align: center;
color: blue;
font-weight: bold;
padding: 5px 0 0 0;
}
I am trying to create a site using html,css,php & MySQL. I am trying to design a liquid layout, with a centred navigation menu, within the header. In google chrome, the design works well. but in firefox and IE, the end of list items drop down to a new line. How can I fix this issue?
I am attaching the code snippets below:
css style for menu:
.menu {
float:left;
width:100%;
background-image:url(../images/menu_bg.gif);
background-repeat:repeat-x;
min-width:750px;
min-height:81px;
overflow:hidden;
position:relative;
}
.menu ul{
clear: both;
float:left;
list-style:none;
text-align:center;
left:50%;
position:relative;
display:inline-block;
white-space: nowrap;
}
.menu > ul > li {
float:left;
right: 50%;
position:relative;
list-style:none;
}
.menu > ul > li > a {
display:block;
color:#ff3;
text-decoration:none;
background:transparent;
padding:0 0 0 10px;
}
.menu > ul > li > a b {
display:block;
background:transparent;
padding:0 10px 0 10px;
}
**********************************
css styles for Header:
#header {
background-image:url(../images/header_bg.gif);
background-repeat:repeat-x;
height:160px;
min-width:750px;
}
#logo {
background-image:url(../images/logo.gif);
background-position:10px 10px;
background-repeat:no-repeat;
height:79px;
}
*******************************************************
body:
<div id="header">
<div id="logo"></div>
<div class="menu">
<ul>
<li class="current"><b>Home</b></li>
<li><b>About Us</b></li>
<li><b>Services</b></li>
<li><b>Tech Shop</b></li>
<li><b>Downloads</b></li>
<li><b>Knowledge Base</b></li>
<li><b>Contact Us</b></li>
<li><b>Live Help</b></li>
</ul>
</div>
</div>
********************************
Remove left:50%; and right:50%; They are meaningless
I need to add a "jobs" page to the menu bar at the top of my website's homepage (and the other pages)
When i try to add one just by repeating the code that creates the current menu bar it adds it so that it's below the "home" tab. I need it at the side of the "contact us" link of each page.
I have looked at the css page but i didn't create it and can't figure out how to get it to display as i want it.
Please help me
/*menu*/
.menu { padding:10px 0 0 0; margin:0 ; width:410px; float:left; }
.menu ul { padding:0; margin:0; list-style:none; border:0; float:right;}
.menu ul li { float:left; margin:0; padding:0 5px; border:0;}
.menu ul li a { float:left; margin:6; padding:9px 0; color:#fff; font:normal 14px Arial, Helvetica, sans-serif; text-decoration:none;}
.menu ul li a span { padding:10px 15px; background:none;}
.menu ul li a:hover { background: url(images/menutest.gif) no-repeat right;}
.menu ul li a:hover span { background:url(images/menutest.gif) no-repeat left;}
.menu ul li a.active { background:url(images/menutest.gif) no-repeat right;}
.menu ul li a.active span { background:url(images/menutest.gif) no-repeat left;}
Increasing the width of .menu may work for you because you have set the width of the .menu. if you don't want to change the width, probably you can reduce the padding of spans inside the Li of .menu ul.
How can I force all items in a horizontal list (menu) to be the same width?
This is my CSS code so far:
a { text-decoration:none; }
#navlist ul { margin:0; padding:0; list-style-type:none; }
#navlist ul li { display:inline; }
#navlist li a {
padding:10px;
margin:2px;
background:grey;
color:white;
}
#navlist li a:hover {
color:white;
background:black;
}
EDIT:
It now works (thanks to #Gaby) by changing the first 3 lines into:
#navlist ul { margin:0; padding:0; list-style-type:none; }
#navlist ul li { float:left; text-align:center; }
#navlist ul li a { text-decoration:none; display:block; width:120px; }
float the elements and make them block instead of inline
#navlist ul { margin:0; padding:0; list-style-type:none; overflow:auto; }
#navlist ul li { display:block;width:100px;float:left; }
You might want to make the a to be block as well, to fill the li and make it all clickable..