I need to make my list appear horizontal at the center of my web page.
This is my code:
.list-group {
clear: both;
display: inline-block;
content: "";
padding-right: 50px;
padding-left: 50px;
}
<div>
<ul class="list-group">
<li class="list-group-item">Home</li>
<li class="list-group-item">About Us</li>
<li class="list-group-item">Gallery</li>
<li class="list-group-item">Contact Us</li>
<li class="list-group-item">Students ePortal</li>
</ul>
</div>
I tried above code but it is not working.
Its display: table; that gets the job done.
#menu-outer {
height: 84px;
}
.table {
display: table; /* Allow the centering to work */
margin: 0 auto;
}
ul#list-group {
min-width: 696px;
list-style: none;
padding-top: 20px;
}
ul#list-group li {
display: inline;
}
<div id="menu-outer">
<div class="table">
<ul id="list-group">
<li class="list-group-item">Home</li>
<li class="list-group-item">About Us</li>
<li class="list-group-item">Gallery</li>
<li class="list-group-item">Contact Us</li>
<li class="list-group-item">Students ePortal</li>
</ul>
</div>
</div>
Try this:
.list-group {
list-style: none;
}
.list-group-item {
display: inline;
}
<div id="menu">
<ul class="list-group">
<li class="list-group-item">Home</li>
<li class="list-group-item">About Us</li>
<li class="list-group-item">Gallery</li>
<li class="list-group-item">Contact Us</li>
<li class="list-group-item">Students ePortal</li>
</ul>
</div>
Is this what you need ? please take a look at this
.menu {
float: left;
width: 100%;
}
.menu ul{
margin: 0;
padding: 0;
text-align:center;
}
.menu ul li {
list-style: none;
display: inline-block;
padding: 5px;
}
<div class="menu">
<ul>
<li class="list-group-item">Home</li>
<li class="list-group-item">About Us</li>
<li class="list-group-item">Gallery</li>
<li class="list-group-item">Contact Us</li>
<li class="list-group-item">Students ePortal</li>
</ul>
</div>
Use margin: 0 auto to center container that holds menu, use float or display:inline to show your menu items inline.
div {
width: 80%;
margin: 0 auto;
min-width: 720px;
}
ul {
list-style: none;
}
li {
float: left;
padding: 0 5%;
border: 1px solid black;
}
<div>
<ul class="list-group">
<li class="list-group-item">Home</li>
<li class="list-group-item">About Us</li>
<li class="list-group-item">Gallery</li>
<li class="list-group-item">Contact Us</li>
<li class="list-group-item">Students ePortal</li>
</ul>
</div>
.list-group {
text-align: center;
}
.list-group-item {
display: inline-block;
}
<div>
<ul class="list-group">
<li class="list-group-item">Home</li>
<li class="list-group-item">About Us</li>
<li class="list-group-item">Gallery</li>
<li class="list-group-item">Contact Us</li>
<li class="list-group-item">Students ePortal</li>
</ul>
</div>
Try this css:
.list-group {
text-align: center;
}
.list-group-item {
display: inline-block;
}
Related
I have an UL that acts as my navigation bar on my web page. currently it is all the way to the left of the screen. I would like it to be centered and have the background color stretch all the way to the left and right, Like below. what would I need to change to stretch the UL across the page like the top example image?
Here is what it looks like currently:
Here is my code:
.parent {
display: block;
position: relative;
float: left;
line-height: 30px;
background-color: #1D3567;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
.parent:hover>ul {
display: block;
position: absolute;
}
.child {
display: none;
}
.child li {
background-color: #1D3567;
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
}
.child li a {
color: #FFFFFF;
}
ul {
list-style-type: none;
margin: 0;
padding: 0px;
min-width: 15em;
}
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
li:hover {
background-color: #95B4CA;
}
.parent li:hover {
background-color: #95B4CA;
}
<ul id="nav_ul">
<li class="parent">Home</li>
<li class="parent">Outlook Web</li>
<li class="parent">Production
<ul class="child">
<li class="parent">Hennig South</li>
<li class="parent">Hennig Enclosure Systems</li>
<li class="parent">Hennig South</li>
<li class="parent">Factory Andon</li>
<li class="parent">Web Docs</li>
</ul>
</li>
<li class="parent">IT
<ul class="child">
<li>Knowledge Base</li>
<li>Submit a Ticket</li>
<li class="parent">Archived Links</li>
</ul>
</li>
<li class="parent">Office Directories
<ul class="child">
<li>Hennig</li>
<li>AME</li>
</ul>
</li>
<li class="parent">Hennig Parts</li>
<li class="parent">Factory Andon</li>
<li class="parent">Business Cards</li>
<li class="parent">Reports
<ul class="child">
<li class="parent">Global Shop<span class="expand">»</span>
<ul class="child">
<li>Inventory Report</li>
<li>Sales Report</li>
<li>Quotes Report</li>
<li>Work Order Report</li>
<li>Part Where Used Report</li>
</ul>
</li>
<li class="parent">Ndustrios<span class="expand">»</span>
</li>
</ul>
</li>
</ul>
Make your ul a flex container in which you align the children centered, and apply the background-color to this element instead of the li children by adding this rule:
#nav_ul {
width: 100%;
display: flex;
justify-content: center;
background-color: #1D3567;
}
.parent {
position: relative;
float: left;
line-height: 30px;
background-color: #1D3567;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
.parent:hover>ul {
display: block;
position: absolute;
}
.child {
display: none;
}
.child li {
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
}
.child li a {
color: #FFFFFF;
}
ul {
list-style-type: none;
margin: 0;
padding: 0px;
min-width: 15em;
}
#nav_ul {
width: 100%;
display: flex;
justify-content: center;
background-color: #1D3567;
}
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
li:hover {
background-color: #95B4CA;
}
.parent li:hover {
background-color: #95B4CA;
}
<ul id="nav_ul">
<li class="parent">Home</li>
<li class="parent">Outlook Web</li>
<li class="parent">Production
<ul class="child">
<li class="parent">Hennig South</li>
<li class="parent">Hennig Enclosure Systems</li>
<li class="parent">Hennig South</li>
<li class="parent">Factory Andon</li>
<li class="parent">Web Docs</li>
</ul>
</li>
<li class="parent">IT
<ul class="child">
<li>Knowledge Base</li>
<li>Submit a Ticket</li>
<li class="parent">Archived Links</li>
</ul>
</li>
<li class="parent">Office Directories
<ul class="child">
<li>Hennig</li>
<li>AME</li>
</ul>
</li>
<li class="parent">Hennig Parts</li>
<li class="parent">Factory Andon</li>
<li class="parent">Business Cards</li>
<li class="parent">Reports
<ul class="child">
<li class="parent">Global Shop<span class="expand">»</span>
<ul class="child">
<li>Inventory Report</li>
<li>Sales Report</li>
<li>Quotes Report</li>
<li>Work Order Report</li>
<li>Part Where Used Report</li>
</ul>
</li>
<li class="parent">Ndustrios<span class="expand">»</span>
</li>
</ul>
</li>
</ul>
There are two codes below. The codes are for dropdown menu. Both codes are almost same but with a little difference. I have created a main list item for the main menu and given it classes. Then I have created a submenu and given it classes menu. The main heading is given class heading and has element in each of the element.
When I apply ":hover" on (anchor element) element combined with on submenu(dropdown element) the code does not work. While if I apply ":hover" on class heading(class of element) the drop down works.
I am sharing the code to clarify and be more specific.
The following code works for the drop down menu and has hover on heading class. I have commented in the code of css to clarify which part of the code I am referring.
.menu{
padding: 20px;
background: #d80000;
}
.mainmenu{
display: flex;
list-style: none;
}
.heading{
margin-right: 1px;
}
.mainmenu .heading a{
display: inline-block;
padding: 10px;
text-decoration: none;
background: #fff;
color: #d80000;
width: 80px;
text-align: center;
position: relative;
}
.submenu{
list-style: none;
margin-left: -40px;
display: none;
position: absolute;
}
.submenu a{
border-top: 3px solid #d80000;
width: 80px;
}
.heading a:hover{
background: #d80000;
color: #fff;
}
/* Here the hover and submenu element works to make the element display as block*/
.heading:hover .submenu{
display: block;
}
<html>
<head>
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="style5.css">
</head>
<body>
<div class="menu">
<ul class="mainmenu">
<li class="heading">Home
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">About
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">Services
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">Products
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">Contact
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Now I am going to post the code which is not working for the dropdown menu
In this the element is applied with hover along with submenu class.
.menu{
padding: 20px;
background: #d80000;
}
.mainmenu{
display: flex;
list-style: none;
}
.heading{
margin-right: 1px;
}
.mainmenu .heading a{
display: inline-block;
padding: 10px;
text-decoration: none;
background: #fff;
color: #d80000;
width: 80px;
text-align: center;
position: relative;
}
.submenu{
list-style: none;
margin-left: -40px;
display: none;
position: absolute;
}
.submenu a{
border-top: 3px solid #d80000;
width: 80px;
}
.heading a:hover{
background: #d80000;
color: #fff;
}
/* Here the hover on a and submenu element doesnot works to make the element display as block*/
.heading a:hover .submenu{
display: block;
}
<html>
<head>
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="style5.css">
</head>
<body>
<div class="menu">
<ul class="mainmenu">
<li class="heading">Home
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">About
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">Services
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">Products
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">Contact
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
So my question is why is the code working for the first code and not for the second code. The second code has hover on element while the first code has hover on class of element of the main menu.
.heading a:hover .submenu
^
There you have a descendant combinator.
<li class="heading">Home
<ul class="submenu">
Here the .submenu is a sibling of the a element, not a descendant.
You need one of the sibling combinators
You are not using a in the second one so use
.heading a:hover .submenu{
display: block;
}
here you are making the mistake :
.heading:hover .submenu{
display: block;
}
Use general sibling selector to select .submenu siblings of .heading a:hover. EG:
.heading a:hover ~ .submenu{
display: block;
}
However, now when you move your pointer down to the submenu itself you're no longer hovering on the a so the submenu will revert to display:none;, To resolve this we can insist that the .submenu themselves are display:block; when hovered. EG:
.heading .submenu:hover {
display: block;
}
Working demo:
.menu{
padding: 20px;
background: #d80000;
}
.mainmenu{
display: flex;
list-style: none;
}
.heading{
margin-right: 1px;
}
.mainmenu .heading a{
display: inline-block;
padding: 10px;
text-decoration: none;
background: #fff;
color: #d80000;
width: 80px;
text-align: center;
position: relative;
}
.submenu{
list-style: none;
margin-left: -40px;
display: none;
position: absolute;
}
.submenu a{
border-top: 3px solid #d80000;
width: 80px;
}
.heading a:hover{
background: #d80000;
color: #fff;
}
/* Use general sibling selector to select .submenu siblings of .heading a:hover*/
.heading a:hover ~ .submenu{
display: block;
}
/* however, now when you move your pointer down to the submenu itself you're no longer hovering on the a so the submenu will go back to display none; To resolve this we can insist that the submenu themselves are display block when hovered: */
.heading .submenu:hover {
display: block;
}
<html>
<head>
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="style5.css">
</head>
<body>
<div class="menu">
<ul class="mainmenu">
<li class="heading">Home
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">About
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">Services
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">Products
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">Contact
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I'm having trouble fixing my page navigation (in the home section) to not block the main website navigation bar. I've looked it up, but can't seem to find an answer that works. I'd like the main navigation to fall in front of the secondary page navigation. I created a jsfiddle to show what's happening.
https://jsfiddle.net/ethacker/o5ks4pu2/
CSS:
body {
background-color: beige;
color: lightblue;
padding: 0;
margin:0;
}
header {
background-color: lightblue;
padding: 5px 0;
margin: 0;
}
header h1 {
color: cadetblue;
font-family: Arial;
margin: 0;
padding: 5px 15px;
display: inline;
}
.navMenu{
display: inline;
margin: 0;
}
.navMenu .parentMenu {
display: inline-block;
list-style-type: none;
background-color: lightgray;
padding: 5px 10px;
border: thin solid darkgray;
border-radius: 3px;
color: honeydew;
position: relative;
margin: 0;
}
.navMenu .parentMenu a{
color: azure;
}
.navMenu .parentMenu .sub-menu{
display: none;
position: absolute;
list-style-type: none;
padding: 0;
margin: 0;
left: -1px;
top: 27px;
}
.navMenu .parentMenu:hover .sub-menu{
display: block;
}
.parentMenu:hover .sub-menu li{
border: thin solid darkgray;
padding: 4%;
background-color: lightgray;
color: honeydew;
text-align: left;
white-space: nowrap;
width: 100%;
list-style-type: none;
margin: 0;
}
.parentMenu .sub-menu li:hover {
background-color: lightsteelblue;
}
.section {
background-color: wheat;
color: darkslategray;
padding: 5px;
float: left;
display: inline;
width: 63%;
margin: 0 1% 1% 1%;
border-radius: 10px;
border: thin solid khaki;
box-shadow: lightgray;
}
#about {
float: right;
width: 30%;
margin: 1% 1% 0 0;
text-align: center;
}
#home {
margin: 1% 0 1% 1%;
}
h4, h3 {
color: lightseagreen;
}
#fdnav {
margin: 1% 0 1% 1%;
padding: 1% .5%;
}
.fdNavMenu{
display: inline;
margin: 0;
padding: 0;
}
.fdNavMenu .parentMenu {
display: inline-block;
list-style-type: none;
position: relative;
background-color: lightgray;
border: thin solid darkgray;
border-radius: 3px;
margin: -0.1%;
padding: .2%;
}
.fdNavMenu .parentMenu a{
color: honeydew;
}
.fdNavMenu .parentMenu .sub-menu {
display: none;
position: absolute;
left: -1px;
top: 22px;
margin: 0;
padding: 0;
}
.fdNavMenu .parentMenu:hover .sub-menu {
display: inline;
}
HTML CODE:
<body>
<header>
<nav>
<h1> Welcome to Mommy Madness</h1>
<ul class="navMenu">
<li class="parentMenu">Home
<ul class="sub-menu">
<li>About</li>
<li>Contact</li>
</ul>
</li>
<li class="parentMenu">Pregnancy
<ul class="sub-menu">
<li>Advice</li>
<li>Gender Predictions</li>
<li>Trying To Conceive</li>
</ul>
</li>
<li class="parentMenu">All About Baby
<ul class="sub-menu">
<li>Fetal Development</li>
<li>Guidelines </li>
<li> Milestones</li>
</ul>
</li>
<li class="parentMenu">Party Momma
<ul class="sub-menu">
<li>Pregnancy Announcement</li>
<li>Gender Reveal</li>
<li>Baby Shower</li>
<li>Birth Announcement</li>
<li> Birthdays</li>
</ul>
</li>
<li class="parentMenu">Stations
<ul class="sub-menu">
<li>Hospital Bag</li>
<li>Diaper Bag</li>
<li>Changing Station</li>
<li>Baby Gear</li>
</ul>
</li>
<li class="parentMenu">Memory Markers
<ul class="sub-menu">
<li>DIY</li>
<li>Purchases</li>
</ul>
</li>
<li class="parentMenu">Reviews
<ul class="sub-menu">
<li>Games</li>
<li>Gear</li>
<li>Learning</li>
</ul>
</li>
<li class="parentMenu">Blog
<ul class="sub-menu">
<li>Fit Momma</li>
<li>Minimal Momma</li>
<li>Modern Momma</li>
<li>Organic Momma</li>
<li>Organizing Queen</li>
<li>Savings Savvy</li>
<li>Tech Savvy</li>
<li>Traditional Momma</li>
</ul>
</li>
</ul>
</nav>
</header>
<div class="section" id="about">
<h4>Fetal Development</h4>
<p>Everyone wonders what in the world is going on inside the womb. <br> I've created a database
of sorts to contain all knowledge of fetal development. <br> It's great to have all answers in one place, huh? </p>
</div>
<div class="section" id="fdnav">
<ul class="fdNavMenu">
<li class="parentMenu"> Month One
<ul class="sub-menu">
<li><a>Week One</a></li>
<li><a>Week Two</a></li>
<li><a>Week Three</a></li>
<li><a>Week Four</a></li>
</ul>
</li>
<li class="parentMenu"> Month Two
<ul class="sub-menu">
<li><a>Week Five</a></li>
<li><a>Week Six</a></li>
<li><a>Week Seven</a></li>
<li><a>Week Eight</a></li>
</ul>
</li>
<li class="parentMenu"> Month Three
<ul class="sub-menu">
<li><a>Week Nine</a></li>
<li><a>Week Ten</a></li>
<li><a>Week Eleven</a></li>
<li><a>Week Twelve</a></li>
</ul>
</li>
<li class="parentMenu"> Month Four
<ul class="sub-menu">
<li><a>Week 13</a></li>
<li><a>Week 14</a></li>
<li><a>Week 15</a></li>
<li><a>Week 16</a></li>
</ul>
</li>
<li class="parentMenu"> Month Five
<ul class="sub-menu">
<li><a>Week 17</a></li>
<li><a>Week 18</a></li>
<li><a>Week 19</a></li>
<li><a>Week 20</a></li>
</ul>
</li>
<li class="parentMenu"> Month Six
<ul class="sub-menu">
<li><a>Week 21</a></li>
<li><a>Week 22</a></li>
<li><a>Week 23</a></li>
<li><a>Week 24</a></li>
</ul>
</li>
<li class="parentMenu"> Month Seven
<ul class="sub-menu">
<li><a>Week 25</a></li>
<li><a>Week 26</a></li>
<li><a>Week 27</a></li>
<li><a>Week 28</a></li>
</ul>
</li>
<li class="parentMenu"> Month Eight
<ul class="sub-menu">
<li><a>Week 29</a></li>
<li><a>Week 30</a></li>
<li><a>Week 31</a></li>
<li><a>Week 32</a></li>
</ul>
</li>
<li class="parentMenu"> Month Nine
<ul class="sub-menu">
<li><a>Week 33</a></li>
<li><a>Week 34</a></li>
<li><a>Week 35</a></li>
<li><a>Week 36</a></li>
</ul>
</li>
<li class="parentMenu"> Month Ten
<ul class="sub-menu">
<li><a>Week 37</a></li>
<li><a>Week 38</a></li>
<li><a>Week 39</a></li>
<li><a>Week 40</a></li>
</ul>
</li>
</ul>
</div>
Add z-index to .parentMenu:
.navMenu .parentMenu {
display: inline-block;
list-style-type: none;
background-color: lightgray;
padding: 5px 10px;
border: thin solid darkgray;
border-radius: 3px;
color: honeydew;
position: relative;
margin: 0;
z-index: 1;
}
z-index specifies the order of positioned elements. When elements overlap, it determines which one covers the other.
Updated JSFiddle
Add z-index value for the absolute position submenu elements. Read this Z_IDEX PRROPERTY . Here is your Fiddle . Simply add this CSS on your part(Check line number 54 on fiddle link)
.sub-menu {
z-index:1000;
}
I have searched for the answer to this but out of the questions/answers I found none of them worked in my case.
What I have is a "Mega Menu" with links down the left side, when one of the links are hovered with the mouse it expands to the right showing hidden links with images. What I would like to do is have the left side "hoverable" link area expand to be the same size as the right side area that contains the images.
Currently the left side is a fixed height and when I attempted to apply clear: both overflow: hidden as the other answers on questions suggested it broke the layout. I am hoping there is a pure CSS way of doing what I need. I could write it in JS but would prefer not to if its not needed. I have included a codepen that shows what I have currently.
https://codepen.io/anon/pen/wGZjpp?editors=1100
<div class="megaMenuWrapper">
<div class="megaMenuContainer" style="display: block;">
<ul id="menu-main-menu" class="menu">
<div class="background"><span class="megamenu-title">SHOP BY CATEGORY</span>
<li class="category-item" id="menu-item-3">Showers
<ul class="sub-menu right-side">
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-4">
<img src="http://placekitten.com/180/180">Shower Stalls
</li>
<li id="menu-item-8">
<img src="http://placekitten.com/180/180">Shower Bases
</li>
</ul>
</li>
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-5">
<img src="http://placekitten.com/180/180">Shower Walls
</li>
</ul>
</li>
</ul>
</li>
<li class="category-item" id="menu-item-9">Toilets
<ul class="sub-menu right-side">
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-10">
<img src="http://placekitten.com/180/180">Bidets
</li>
<li id="menu-item-11">
<img src="http://placekitten.com/180/180">Portable Toilets
</li>
</ul>
</li>
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-17">
<img src="http://placekitten.com/180/180">Bed Pans
</li>
</ul>
</li>
</ul>
</li>
<li class="category-item" id="menu-item-16">Bathtubs
<ul class="sub-menu right-side">
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-18">
<img src="http://placekitten.com/180/180">Clawfoot
</li>
</ul>
</li>
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-19">
<img src="http://placekitten.com/180/180">Copper
</li>
</ul>
</li>
</ul>
</li>
<li class="category-item" id="menu-item-20">Sinks
<ul class="sub-menu right-side">
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-21">
<img src="http://placekitten.com/180/180">Modern
</li>
</ul>
</li>
</ul>
</li>
<li class="category-item" id="menu-item-25">Bathroom Accessories
<ul class="sub-menu right-side">
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-22">
<img src="http://placekitten.com/180/180">Bathtub Faucets
</li>
<li id="menu-item-27">
<img src="http://placekitten.com/180/180">Shower Curtains
</li>
</ul>
</li>
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-23">
<img src="http://placekitten.com/180/180">Toilet Brushes
</li>
<li id="menu-item-28">
<img src="http://placekitten.com/180/180">Vanities
</li>
</ul>
</li>
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-24">
<img src="http://placekitten.com/180/180">Toilet Seats
</li>
</ul>
</li>
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-26">
<img src="http://placekitten.com/180/180">Mirrors
</li>
</ul>
</li>
</ul>
</li>
</div>
</ul>
</div>
</div>
CSS:
body{
background: #ddd;
}
ul#mainnav>li>a:not(.last) {
border-right: 1px solid #fff;
}
ul#mainnav>li>a {
padding: 5px 15px;
margin-top: 20px;
}
.megaMenuWrapper {
position: relative;
margin-top:30px;
}
.megaMenuContainer {
position: absolute;
width: 100%;
/* display: none; */
z-index: 2;
/* height: auto; */
}
ul#menu-main-menu {
width: 100%;
height: 100%;
position: relative;
margin:0;
list-style: none;
}
ul#menu-main-menu .background > li:first-of-type {
margin-top: 5px;
}
.background {
width: 20%;
height: 100%;
background: rgb(255, 255, 255);
border-right: 2px solid #000;
}
.column.menu-item {
padding: 1%;
width: 23%;
}
ul.sub-menu {
list-style: none;
margin: 0;
}
.right-side {
position: absolute;
top: 0;
left: 20%;
height: auto;
right: 0;
width: 80%;
display: none;
}
.right-side li.menu-item {
float: left;
width: 23%;
padding: 1%;
height: 100%;
}
.megamenu-title {
color: #545454;
margin-top: 20px;
display: inline-block;
width: 100%;
margin-left: 20px;
font-weight: bold;
}
li.category-item a{
padding: 5px 0px 5px 20px;
display: block;
}
li.category-item a:hover {
background-color: white;
color: #3C3C3C !important;
text-decoration: none;
}
li.category-item a:hover + ul,
.right-side:hover
{
display: block;
background: rgb(255, 255, 255);
border-left: 1px solid #000;
}
ul#menu-main-menu li.menu-item ul.sub-menu li a {
color: #3c3c3c;
padding: 0;
text-align: center;
}
ul#menu-main-menu li.menu-item ul.sub-menu li a:hover {
background: none;
}
ul#menu-main-menu li.menu-item ul.sub-menu li img {
display: block;
margin: 0 auto;
}
ul#menu-main-menu li a {
color: #4C4C4C;
}
UPDATE:
This is ultimately the jQuery that I have ended up going with. Unless someone answers with a pure CSS solution.
$('.category-item').hover(
function() {
var height = $(this).children('.right-side').outerHeight();
$('.megaMenuContainer').height(height);
},
function() {
$('.megaMenuContainer').css('height', '');
}
);
the idea is the following :
.megaMenuContainer {
height:auto;
}
.category-item {
height:2em;
}
.category-item:hover {
height:3em;
}
in fact if you put the height of the parent equal to auto the height of the child element will follow it.
This is not possible with pure CSS like I wanted with the current structure so I decided to go with the jQuery solution below.
$('.category-item').hover(
function() {
var height = $(this).children('.right-side').outerHeight();
$('.megaMenuContainer').height(height);
},
function() {
$('.megaMenuContainer').css('height', '');
}
);
I'm trying to get a ul horizontally centered within the space but no matter what I try it remains left aligned.
<nav>
<div id="home">
<ul id="topnav">
<li class="home">home</li>
<li class="products">products</li>
<li class="support">support</li>
<li class="wtb">where to buy</li>
<li class="webstore">web store</li>
<li class="contact">contact us</li>
<li class="facebook"><a href="#" target="_blank"
title="Hauppauge Computer Works">facebook</a></li>
</ul>
</div>
</nav>
CSS:
CSS file here
ul#topnav {
padding: 0px;
list-style: none;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
position: relative;
left: auto;
width: 123px;
}