I almost got this drop down menu knocked out. I'm having a problem centering it vertically. I tried to add padding and margin but one puts a weird line through my drop down areas and one puts extra spacing between my drop downs.
HTML
<div id="navmenudiv">
<ul id="navmenu">
<li>Home</li>
<li>
About Us
<ul class="sub1">
<li>Introduction</li>
<li>Who We Are</li>
<li>Staff</li>
</ul>
</li>
<li>
Services
<ul class="sub1">
<li>Sunday Morning</li>
<li>Sunday Evening</li>
<li>Wednesday Evening</li>
</ul>
</li>
<li>Resources</li>
<li>Contact Us</li>
<li>News and Events</li>
</ul>
</div>
CSS
#navmenudiv {
z-index:60;
margin: -30px 0;
height:50px;
background-color:#5340BF;
top:40;
position: relative;
text-align:center;
}
/* rules for nav menu */
ul#navmenu, ul.sub1, ul.sub2 {
list-style-type:none;
}
ul#navmenu li {
width:125px;
text-align:center;
position:relative;
margin-right:4px;
margin-top:10px;
display: inline-block;
}
ul#navmenu a {
text-decoration:none;
display:block;
width:125px;
height 25px;
line-height:25px;
background-color:#FFF;
border: 1px solid #CCC;
border-radius: 5px;
}
ul#navmenu .sub1 li {
border: 1px solid green;
}
ul#navmenu .sub1 a {
margin-top: 3px;
}
ul#navmenu li:hover > a {
background-color:#CFC;
}
ul#navmenu li:hover a:hover {
background-color:#FF0;
}
ul#navmenu ul.sub1 {
display:none;
position:absolute;
top: 26px;
left: 0px;
}
ul#navmenu li:hover .sub1 {
display:block;
}
/* end rules for nav menu */
Site at http://www.joekellywebdesign.com/churchsample1/index.html
Css at http://www.joekellywebdesign.com/churchsample1/css/styles.css
You can add margin-top:10px; to the li.
Updated CSS
ul#navmenu li {
width: 125px;
text-align: center;
position: relative;
float: left;
margin-right: 4px;
}
ul#navmenu > li {
margin-top: 10px;
}
You can also combine both margins.. margin: 10px 4px 0px 0px;
Additionally, adding inline-block and removing float:left will give you this result:
Code is really, really broke on top but this should help you out a bit.
Centering things vertically is a weird task to handle in CSS and I can't really explain why you need to do this but its how I've always done it.
#myDiv {
top:50;
margin-top:-150px;
}
Related
I have a list menu and I display all the elements in that list thanks to
.navigator ul
{
display: inline-block;
width: 100%;
}
.navigator li {
margin:4px 50px -10px 0px;
float:left;
list-style:none;
font-size:17px;
}
.navigator {
width:100%;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
background:#3298BA;
}
But I want to have some elements of this list aligned to the left, others centered to the center and the last elements to the right.
And I don't know which CSS properties I can set to get this.
This is my current menu :
And the code of this menu :
<nav class="navigator">
<ul class="active">
<li class="current-item">Characters</li>
<li>Skills</li>
<li>Items</li>
<li>Stats</li>
<li>My account</li>
<li></li>
</ul>
</nav>
My objective is to have Characters aligned to the left ; Skills, Items and Stats to the center and finally My account and the glyphicon aligned to the right.
Set a width for each li (e.g. width: 16%) and add the following CSS
.navigator li:first-child {
text-align: left;
}
.navigator li:last-child {
text-align: right;
}
Don't forget to set the default alignment in your ".navgator li" CSS to "center"
.navigator ul
{
display: block;
width: 100%;
text-align:center;
}
.navigator li {
margin:4px 10px 0px 0px;
float:none;
list-style:none;
font-size:17px;
display:inline-block;
width: 14%;
}
.navigator {
width:100%;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
background:#3298BA;
}
.navigator li:first-child{
text-align:left;
}
.navigator li:last-child{
text-align:right;
}
<nav class="navigator">
<ul class="active">
<li class="current-item">Characters</li>
<li>Skills</li>
<li>Items</li>
<li>Stats</li>
<li>My account</li>
<li>1</li>
</ul>
</nav>
I am creating a vertical navigation menu using ul and li I want to make span the full width of ul so I can have underline for each menu item (like this site (http://www.steffenallen.com/index.php))
However, there is a space in li that prevents it from spanning across the parent ul. Could someone tell me how the above website did it? Or, what I need to do?
<nav>
<ul class='menu'>
<li class="menuItem">
About
</li>
<li class="menuItem"> Album
<ul class="submenu">
<li class="submenu-Item">Nepal </li>
<li class="submenu-Item">Seattle</li>
<li class="submenu-Item">South Korea</li>
</ul>
</li>
<li class="menuItem"> Contact </li>
<!-- <li> </li> -->
</ul>
My CSS is
ul,li{
list-style: none;
display: block;
}
ul.menu{
width: 170px;
/*position: absolute;*/
/*width: 100%;*/
/*margin-left: -20px;*/
border: 1px solid orange;
}
ul.submenu{
/*position: absolute;*/
/*left: -999px;*/
/*visibility: hidden;*/
display: none;
}
li{
width:140px;
margin: 0;
padding: 0;
/*width:100%;*/
border-left: 1px blue solid;
border-right: 1px blue solid;
}
span{
display: block;
}
li a, li span {
/*width: 170px;*/
/*width: 100%;*/
border-bottom: #cbcbcb 1px solid;
}
li.menuItem, li.submenu-Item{
text-align: right;
margin: 1em 0em 1em 0em;
}
li.menuitem > a{
color: #808080;
}
li a:hover{
color: steelblue;
}
li.menuItem a.current{
background-color: orange;
}
ul.menu:first-child{
margin-top: 0
}
First things first, your CSS is not well-written and hence a little difficult to understand.
The main problem in your code happens to be the default CSS that is being applied. You can remove that as follows:
ul, li {
margin: 0;
padding: 0;
}
However, I'd suggest you simplify your CSS code as follows. This will still achieve what you are looking for all the while making your code more elegant and easily readable. Please see the code below :
ul, li {
margin:0px;
padding:0px;
}
ul.menu {
border: 1px solid Orange;
width:200px;
}
ul.menu li {
display:block;
list-style-type:none;
}
ul.menu li a {
border-bottom:1px solid #ccc;
display:block;
text-align:right;
text-decoration: none;
}
ul.menu li ul {
display:none;
}
ul.menu li:hover > ul {
display:block;
}
ul.menu li ul li:last-child {
border-bottom:none;
}
See this working below :
ul, li {
margin:0px;
padding:0px;
}
ul.menu {
border: 1px solid Orange;
width:200px;
}
ul.menu li {
display:block;
list-style-type:none;
}
ul.menu li a {
border-bottom:1px solid #ccc;
display:block;
text-align:right;
text-decoration: none;
}
ul.menu li ul {
display:none;
}
ul.menu li:hover > ul {
display:block;
}
ul.menu li ul li:last-child {
border-bottom:none;
}
<nav>
<ul class='menu'>
<li class="menuItem"> About
</li>
<li class="menuItem"> Album
<ul class="submenu">
<li class="submenu-Item">Nepal
</li>
<li class="submenu-Item">Seattle
</li>
<li class="submenu-Item">South Korea
</li>
</ul>
</li>
<li class="menuItem"> Contact
</li>
<!-- <li> </li> -->
</ul>
Hope this helps!!!
On the left side there is the default margin/padding of ULs, so just remove that. It's 40px and depends on browser if margin or padding is used.
ul, li {margin-left: 0; padding-left: 0;}
The space on the right side is caused by your widths, list has 170px, items just 140px.
http://jsfiddle.net/8q9chvbh/
I am trying to make a vertical menu, but everytime when i show the sub menu on hover, it expands the previous element, making a 'bigger box'. I have no idea how to style that.
Dont want to use some jquery plugin if there is an css solution. I have also bootstrap3, but there is no support for nested dropdowns, dropdowns inside dropdowns ... the nested ones did not open...
JSFiddle link: http://jsfiddle.net/WqW5j/
index.html
<div class="nav">
<ul class="main">
<li>1</li>
<li>2</li>
<li>
3
<ul class="sub">
<li>3-1</li>
<li>3-2
<ul class="sub">
<li>3-2-1</li>
<li>3-2-2
<ul class="sub">
<li>3-2-2-1</li>
<li>3-2-2-2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
css
.main{
list-style: none;
padding:0px;
margin: 0px;
}
.main li{
background-color:#f1f1f1;
padding: 10px;
margin: 5px;
float:left;
clear:both;
}
.main li:hover{
background-color:#d8d8d8;
}
.main .sub{
display: none;
}
.sub > li > .sub{
display: none;
}
.main > li:hover > .sub:nth-of-type(1){
display: block;
position: relative;
left: 20px;
top:-30px;
list-style: none;
float:left;
width: 100px;
clear: both;
}
.sub > li:hover > .sub{
display: block;
position: relative;
left: 20px;
top:-30px;
list-style: none;
float:left;
width: 100px;
}
To get the nested menu work make all the li items position:relative and make the ul displayed on hover as position:absolute.
Check this fiddle
HTML:
<div class="nav">
<ul class="main">
<li>1
<ul class="sub">
<li>1-1
<ul class="sub">
<li>1-1-1</li>
<li>1-2-1</li>
</ul>
</li>
<li>1-2
<ul class="sub">
<li>1-2-1</li>
<li>1-2-2</li>
</ul>
</li>
</ul>
</li>
<li>2</li>
</ul>
</div>
CSS
.main{
list-style: none;
padding:0px;
margin: 0px;
}
.main li{
background-color:#f1f1f1;
padding: 10px;
margin: 5px;
float:left;
clear:both;
position:relative;
}
.main li:hover{
background-color:#d8d8d8;
}
.main .sub{
display: none;
list-style:none;
padding-left:0;
width:auto;
}
.main .sub li{
float:none;
}
.main > li:hover > .sub{
display:block;
position:absolute;
top:0;
left:100%;
}
.sub li:hover .sub{
display:block;
position:absolute;
top:0;
left:100%;
}
I having some problems with the hover effect on the full width of each of my drop down menu items. I want each items background color to change. At the moment, I can only get the width of the text hovered, not the width of the drop down.
http://jsfiddle.net/7AXZR/
Thanks!
The HTML:
<div id="nav">
<ul>
<li><img src="images/kranz3.png" alt="kranz"/>COMPETE</li>
<li><img src="images/thumb3.png" alt="thumb"/>SCORE</li>
<div id="logolist"><li><img src="images/logorz.png" width="175em" /></li></div>
<li><img src="images/shopnav.png" alt="bag"/>SHOP</li>
<ul id="more-dropdown"><li><img src="images/morenav2.png" alt="more"/>MORE<ul>
<div id="dropdown-links">
<li>Print your own art</li>
<li>How it works</li>
<li>About Causes</li>
<li>About our products</li>
<li>About us</li>
<li>Help & Feedback</li>
<li>Terms of Service</li>
<li>Privacy</li></ul>
</div>
</li>
</ul>
</div>
<div class="clear">
</div>
The CSS:
#nav {
position:relative;
background:#ffffff;
width:100%;
height:0.2em:
overflow:visible;
margin-top:-2em;
font-family:Cusmyrb;
font-size:75%;
}
#logolist {
position:absolute;
padding-top:2em;
width:150px;
left:50%;
margin-left:-90px;
margin-top:-7%;
}
#nav ul {
list-style-type:none;
}
#nav li {
display:inline;
float:left;
width:20%;
margin-left:2%;
margin-right:2%;
margin-top:3%;
text-align:center;
}
#nav a {
display:block;
margin-right:0% auto;
padding-left:0% auto;
color:#343234;
text-decoration:none;
}
#nav a:hover {
color:#5020B8;
}
#nav a:active {
color:#5020B8;
}
.clear {
clear:both;
}
#more-dropdown {
margin: 0;
padding: 0;
height:0;
}
#more-dropdown li {
list-style: none;
float: left;
}
#dropdown-links li a {
float:left;
display: block;
font-family:Cusmyr;
font-size:14px;
background-color:#797A7D;
color:#797A7D;
text-decoration: none;
margin-top:0.5em;
margin-left:1em;
}
#dropdown-links li a:hover {
float:left;
display: block;
font-family:Cusmyr;
font-size:14px;
background-color:#01A07E;
color:#797A7D;
text-decoration: none;
margin-top:0.5em;
margin-left:1em;
}
#more-dropdown li ul {
display: none;
width: 6em; /* Width to help Opera out */
background-color:#797A7D;
border:1px solid white;
}
#more-dropdown li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#more-dropdown li:hover li {
float: none;
background-color:#01A07E;
}
#more-dropdown li:hover li a {
color: #ffffff;
}
#more-dropdown li li a:hover {
}
switch
#nav a:hover
to
#nav:hover a
edit:
first: your <a> elements in the <li> elements have atop and left margins so they do not fill up the entire list item
second: the #nav li selector applies also to the list item in the dropdown list and you don't want them to float. This is because then the surrounding list items have height 0
I removed the float except for the first list item:
new fiddle:
http://jsfiddle.net/PZGLz/
Here's the link to the page:
http://themes.brixwork.com/altamont/
The positioning of the tags under the ul#menu appears to be skewed on IE7. I have put borders on the UL (#f00) and LI (#0f0) items to clarify.
IN Firefox, the LI items nest properly to the top of the UL, however on IE the LI nests to the top of the div#menubar rather than the ul#menu under it.
The DOM tree is like this:
<div id="menubar" class="grid_16 alpha omega">
<ul id="menu">
<li style="margin-left:0px;">home</li>
<li>about me</li>
<li>featured listings
<ul class="submenu">
<li>
on a map
</li>
</ul>
</li>
<li>
MLS® search
</li>
<li>
resources
<ul class="submenu">
<li>
for buyers
</li>
<li>
for sellers
</li>
<li>
pre-sale / assignment
</li>
<li>
useful links
</li>
</ul>
</li>
<li>
blog
</li>
<li>
contact me
</li>
</ul>
</div>
Pretty standard div>ul>li menu structure, with optional submenus under each as a ul.submenu>li structure.
I tried putting a "float:left;" to the #menu li node, and that did solve the positioning; however then I don't have a nice centre aligned menu - everything goes to the left on the menu.
Here's the current css revolving around this (note that I'm using 960 grid, and also the reset.css and text.css file that comes with it).
#menubar {
height:40px;
text-align: center;
}
#menu {
margin:10px auto;
padding:0px;
z-index: 20;
width: auto;
display: block;
list-style:none;
white-space: nowrap;
position: relative;
border: 1px solid #f00;
}
#menu li {
display:inline;
margin-left:40px;
margin-right:0px;
margin-top:10px;
margin-bottom:0px;
padding:0px 0px 0px 0px;
list-style:none;
z-index: 25;
position: relative !important;
border: 1px solid #0f0;
}
#menu li a:link, #menu li a:visited {
color:#fff;
text-decoration:none;
font-size:12px;
padding: 10px 0px;
text-transform: uppercase;
}
#menu li a:hover {
color:#ddd;
}
#menu li a:active {
position:relative;
top:1px;
color:#fff;
}
.submenu {
position:absolute;
left: -9999px;
display: block;
background-color:#906117;
padding:0px 0px 0px 0px;
top:0px;
z-index:30;
}
#menu li:hover .submenu {
left: 0px;
}
.submenu li {
text-align: left !important;
margin:0px !important;
padding: 3px 0px 5px 0px !important;
clear: both;
float: left;
position:relative;
overflow: hidden;
z-index: 35;
width: 100% !important;
}
.submenu li:hover {
background-color: #f79c10;
}
.submenu li a:link, .submenu li a:visited {
color:#fff !important;
font-size:12px !important;
padding: 0px !important;
margin: 0px !important;
white-space:nowrap;
display: block;
width: 100%;
padding:3px 10px 5px 10px !important;
z-index: 40;
}
.submenu li a:hover, .submenu li a:active {
color:#fff !important;
}
IE7 ignores margins when ul elements have a relative position. You can fix this by removing the margin in your ul#menu styles and add that value back in the parent div#menubar.
This will give you the same layout result, but will resolve the IE7 margin/relative bug.